2016-07-27 163 views
3

我使用的是AmCharts,除了导出以外,一切都正常。为什么AmCharts导出颜色变为黑色和白色?

我使用下面库AmCharts:

<link href="https://www.amcharts.com/lib/3/plugins/export/export.css" media="all" rel="stylesheet" type="text/css" /> 
<script src="~/Content/amcharts_3.20.9.free/amcharts/amcharts.js"></script> 
<script src="~/Content/amcharts_3.20.9.free/amcharts/serial.js"></script> 
<script src="~/Content/amcharts_3.20.9.free/amcharts/themes/light.js"></script> 
<script src="https://www.amcharts.com/lib/3/plugins/export/export.js"></script> 

和内部AmCharts.makeChart("chartdiv2", {我使用:

"export": { 
     "enabled": true 
    }` 

我的图表是默认丰富多彩这样的:

Colorful Chart

但是我下载到PDF后, PNG,JPG等,或单击Annotate...菜单选项图表转为黑白(灰度)这样的形象:

Greyscaled Chart

Here is video of this issue reproduced

var chartData = generateChartData(); 
 

 
var chart = AmCharts.makeChart("chartdiv2", { 
 
     
 
     "type": "serial", 
 
     "theme": "light", 
 
     "legend": { 
 
      "useGraphSettings": true 
 
     }, 
 
     "dataProvider": chartData, 
 
     "valueAxes": [{ 
 
      "id": "HeartRate", 
 
      "axisColor": "Green", 
 
      "axisThickness": 2, 
 
      "gridAlpha": 0, 
 
      "axisAlpha": 1, 
 
      "position": "left", 
 
      "offset": 50, 
 
     }, { 
 
      "id": "BloodPressure", 
 
      "axisColor": "Purple", 
 
      "axisThickness": 2, 
 
      "gridAlpha": 0, 
 
      "axisAlpha": 1, 
 
      "position": "left" 
 
     }, { 
 
      "id": "Temperature", 
 
      "axisColor": "Black", 
 
      "axisThickness": 2, 
 
      "gridAlpha": 0, 
 
      "offset": 0, 
 
      "axisAlpha": 1, 
 
      "position": "right" 
 
     }, 
 
     { 
 
      "id": "RespiratoryRate", 
 
      "axisColor": "Gold", 
 
      "axisThickness": 2, 
 
      "gridAlpha": 0, 
 
      "offset": 50, 
 
      "axisAlpha": 1, 
 
      "position": "right" 
 
     }, 
 
     { 
 
      "id": "Weight", 
 
      "axisColor": "Orange", 
 
      "axisThickness": 2, 
 
      "gridAlpha": 0, 
 
      "offset": 100, 
 
      "axisAlpha": 1, 
 
      "position": "right" 
 
     }, 
 
     { 
 
      "id": "Age", 
 
      "axisColor": "LightSeaGreen", 
 
      "axisThickness": 2, 
 
      "gridAlpha": 0, 
 
      "offset": 150, 
 
      "axisAlpha": 1, 
 
      "position": "right" 
 
     }], 
 
     "graphs": [{ 
 
      "valueAxis": "BloodPressure", 
 
      "lineColor": "Purple", 
 
      "bullet": "triangleUp", 
 
      "bulletBorderThickness": 1, 
 
      "hideBulletsCount": 30, 
 
      "title": "BloodPressureSystolic", 
 
      "valueField": "BloodPressureSystolic", 
 
      "fillAlphas": 0 
 
     }, 
 
     { 
 
      "valueAxis": "BloodPressure", 
 
      "lineColor": "MediumPurple", 
 
      "bullet": "triangleDown", 
 
      "bulletBorderThickness": 1, 
 
      "hideBulletsCount": 30, 
 
      "title": "BloodPressureDiastolic", 
 
      "valueField": "BloodPressureDiastolic", 
 
      "fillAlphas": 0 
 
     }, { 
 
      "valueAxis": "HeartRate", 
 
      "lineColor": "Green", 
 
      "bullet": "round", 
 
      "bulletBorderThickness": 1, 
 
      "hideBulletsCount": 30, 
 
      "title": "Pulse", 
 
      "valueField": "Pulse", 
 
      "fillAlphas": 0 
 
     }, 
 
     { 
 
      "valueAxis": "Temperature", 
 
      "lineColor": "Black", 
 
      "bullet": "bubble", 
 
      "bulletBorderThickness": 1, 
 
      "hideBulletsCount": 30, 
 
      "title": "Temperature", 
 
      "valueField": "Temperature", 
 
      "fillAlphas": 0 
 
     }, 
 
     { 
 
      "valueAxis": "RespiratoryRate", 
 
      "lineColor": "Gold", 
 
      "bullet": "square", 
 
      "bulletBorderThickness": 1, 
 
      "hideBulletsCount": 30, 
 
      "title": "RespiratoryRate", 
 
      "valueField": "RespiratoryRate", 
 
      "fillAlphas": 0 
 
     }, 
 
     { 
 
      "valueAxis": "Weight", 
 
      "lineColor": "Orange", 
 
      "bullet": "diamond", 
 
      "bulletBorderThickness": 1, 
 
      "hideBulletsCount": 30, 
 
      "title": "Weight", 
 
      "valueField": "Weight", 
 
      "fillAlphas": 0 
 
     }, 
 
     { 
 
      "valueAxis": "Age", 
 
      "lineColor": "LightSeaGreen", 
 
      "bullet": "diamond", 
 
      "bulletBorderThickness": 1, 
 
      "hideBulletsCount": 30, 
 
      "title": "Age", 
 
      "valueField": "Age", 
 
      "fillAlphas": 0 
 
     }], 
 
     "chartScrollbar": {}, 
 
     "chartCursor": { 
 
      "cursorPosition": "mouse", 
 
      "valueLineBalloonEnabled": true, 
 
      "valueLineEnabled": true 
 
     }, 
 
     "categoryField": "RecordedDate", 
 
     "categoryAxis": { 
 
      "parseDates": true, 
 
      "axisColor": "#DADADA", 
 
      "minorGridEnabled": true 
 
     }, 
 
     "export": { 
 
      "enabled": true 
 
     } 
 
    }); 
 

 
    chart.addListener("dataUpdated", zoomChart); 
 
    zoomChart(); 
 

 
    // generate some random data, quite different range 
 
    function generateChartData() { 
 
     var chartData = []; 
 
     var firstDate = new Date(); 
 
     firstDate.setDate(firstDate.getDate() - 100); 
 

 

 
     chartData=[ 
 
      //date: newDate, 
 
      //visits: visits, 
 
      //hits: hits, 
 
      //views: views 
 
       
 
        { 
 
         "RecordedDate": moment("26/07/2016 00:00:00", 'DD/MM/YYYY HH:mm:ss').toDate(), 
 
         "Temperature": 98, 
 
         "Pulse": 100, 
 
         "BloodPressureSystolic": 120, 
 
         "BloodPressureDiastolic": 98, 
 
         "RespiratoryRate": 15, 
 
         "Weight": 50, 
 
         "Age": 18 
 
         }, 
 
       
 
       
 
        { 
 
         "RecordedDate": moment("27/07/2016 00:00:00", 'DD/MM/YYYY HH:mm:ss').toDate(), 
 
         "Temperature": 99.4, 
 
         "Pulse": 101, 
 
         "BloodPressureSystolic": 110, 
 
         "BloodPressureDiastolic": 112, 
 
         "RespiratoryRate": 98, 
 
         "Weight": 60, 
 
         "Age": 19 
 
         }, 
 
       
 
       
 
        { 
 
         "RecordedDate": moment("28/07/2016 00:00:00", 'DD/MM/YYYY HH:mm:ss').toDate(), 
 
         "Temperature": 100, 
 
         "Pulse": 102, 
 
         "BloodPressureSystolic": 109, 
 
         "BloodPressureDiastolic": 95, 
 
         "RespiratoryRate": 97, 
 
         "Weight": 66, 
 
         "Age": 20 
 
         } 
 
       
 
     ] 
 

 
     return chartData; 
 
    } 
 

 
    function zoomChart() { 
 
     chart.zoomToIndexes(chart.dataProvider.length - 20, chart.dataProvider.length - 1); 
 
    }
#chartdiv2 { 
 
    width : 100%; 
 
    height : 500px;
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.js"></script> 
 
<link href="https://www.amcharts.com/lib/3/plugins/export/export.css" rel="stylesheet"/> 
 

 
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script> 
 
<script src="https://www.amcharts.com/lib/3/serial.js"></script> 
 
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script> 
 
<script src="https://www.amcharts.com/lib/3/plugins/export/export.js"></script> 
 

 
<div id="chartdiv2"></div>

而问题的JSFiddle

我已经在Google的Chrome和Mozilla的Firefox中测试了这种行为请指导我如何修改此问题以使其更易于理解?我搜索了很多,但在网上找不到类似的问题。我真的很感激,如果amcharts.com支持也参与帮助。

+2

如果可能请在https://jsfiddle.net/或类似的服务上提供示例。 –

+0

我的代码是写在ASP.Net MVC和一些剃须刀是包括可以jsfiddle会理解我的代码? –

+0

我从浏览器中生成的代码制作一个JSFiddle我会回来一段时间的代码,请稍等,谢谢 –

回答

2

为@gerric建议

这似乎是错误与导出插件。它看起来像颜色无法正确识别。如果您将所有颜色更改为小写,则“标准”颜色(例如橙色)就可以工作。您现在可以使用HEX颜色代码修复此问题。

我试图改变颜色名称Green到​​少数颜色的工作

然后我试图HEX如下所述,其工作

var chartData = generateChartData(); 
 

 
var chart = AmCharts.makeChart("chartdiv2", { 
 

 
    "type": "serial", 
 
    "theme": "light", 
 
    "legend": { 
 
    "useGraphSettings": true 
 
    }, 
 
    "dataProvider": chartData, 
 
    "valueAxes": [{ 
 
    "id": "HeartRate", 
 
    "axisColor": "#00ff00", 
 
    "axisThickness": 2, 
 
    "gridAlpha": 0, 
 
    "axisAlpha": 1, 
 
    "position": "left", 
 
    "offset": 50, 
 
    }, { 
 
    "id": "BloodPressure", 
 
    "axisColor": "#551a8b", 
 
    "axisThickness": 2, 
 
    "gridAlpha": 0, 
 
    "axisAlpha": 1, 
 
    "position": "left" 
 
    }, { 
 
    "id": "Temperature", 
 
    "axisColor": "#000000", 
 
    "axisThickness": 2, 
 
    "gridAlpha": 0, 
 
    "offset": 0, 
 
    "axisAlpha": 1, 
 
    "position": "right" 
 
    }, { 
 
    "id": "RespiratoryRate", 
 
    "axisColor": "#ffd700", 
 
    "axisThickness": 2, 
 
    "gridAlpha": 0, 
 
    "offset": 50, 
 
    "axisAlpha": 1, 
 
    "position": "right" 
 
    }, { 
 
    "id": "Weight", 
 
    "axisColor": "#ffa500", 
 
    "axisThickness": 2, 
 
    "gridAlpha": 0, 
 
    "offset": 100, 
 
    "axisAlpha": 1, 
 
    "position": "right" 
 
    }, { 
 
    "id": "Age", 
 
    "axisColor": "#20b2aa", 
 
    "axisThickness": 2, 
 
    "gridAlpha": 0, 
 
    "offset": 150, 
 
    "axisAlpha": 1, 
 
    "position": "right" 
 
    }], 
 
    "graphs": [{ 
 
    "valueAxis": "bloodpressure", 
 
    "lineColor": "#551a8b", 
 
    "bullet": "triangleUp", 
 
    "bulletBorderThickness": 1, 
 
    "hideBulletsCount": 30, 
 
    "title": "BloodPressureSystolic", 
 
    "valueField": "BloodPressureSystolic", 
 
    "fillAlphas": 0 
 
    }, { 
 
    "valueAxis": "BloodPressure", 
 
    "lineColor": "#9370db", 
 
    "bullet": "triangleDown", 
 
    "bulletBorderThickness": 1, 
 
    "hideBulletsCount": 30, 
 
    "title": "BloodPressureDiastolic", 
 
    "valueField": "BloodPressureDiastolic", 
 
    "fillAlphas": 0 
 
    }, { 
 
    "valueAxis": "HeartRate", 
 
    "lineColor": "#00ff00", 
 
    "bullet": "round", 
 
    "bulletBorderThickness": 1, 
 
    "hideBulletsCount": 30, 
 
    "title": "Pulse", 
 
    "valueField": "Pulse", 
 
    "fillAlphas": 0 
 
    }, { 
 
    "valueAxis": "Temperature", 
 
    "lineColor": "#000000", 
 
    "bullet": "bubble", 
 
    "bulletBorderThickness": 1, 
 
    "hideBulletsCount": 30, 
 
    "title": "Temperature", 
 
    "valueField": "Temperature", 
 
    "fillAlphas": 0 
 
    }, { 
 
    "valueAxis": "RespiratoryRate", 
 
    "lineColor": "#ffd700", 
 
    "bullet": "square", 
 
    "bulletBorderThickness": 1, 
 
    "hideBulletsCount": 30, 
 
    "title": "RespiratoryRate", 
 
    "valueField": "RespiratoryRate", 
 
    "fillAlphas": 0 
 
    }, { 
 
    "valueAxis": "Weight", 
 
    "lineColor": "#ffa500", 
 
    "bullet": "diamond", 
 
    "bulletBorderThickness": 1, 
 
    "hideBulletsCount": 30, 
 
    "title": "Weight", 
 
    "valueField": "Weight", 
 
    "fillAlphas": 0 
 
    }, { 
 
    "valueAxis": "Age", 
 
    "lineColor": "#20b2aa", 
 
    "bullet": "diamond", 
 
    "bulletBorderThickness": 1, 
 
    "hideBulletsCount": 30, 
 
    "title": "Age", 
 
    "valueField": "Age", 
 
    "fillAlphas": 0 
 
    }], 
 
    "chartScrollbar": {}, 
 
    "chartCursor": { 
 
    "cursorPosition": "mouse", 
 
    "valueLineBalloonEnabled": true, 
 
    "valueLineEnabled": true 
 
    }, 
 
    "categoryField": "RecordedDate", 
 
    "categoryAxis": { 
 
    "parseDates": true, 
 
    "axisColor": "#DADADA", 
 
    "minorGridEnabled": true 
 
    }, 
 
    "export": { 
 
    "enabled": true 
 
    } 
 
}); 
 

 
chart.addListener("dataUpdated", zoomChart); 
 
zoomChart(); 
 

 
// generate some random data, quite different range 
 
function generateChartData() { 
 
    var chartData = []; 
 
    var firstDate = new Date(); 
 
    firstDate.setDate(firstDate.getDate() - 100); 
 

 

 
    chartData = [ 
 
    //date: newDate, 
 
    //visits: visits, 
 
    //hits: hits, 
 
    //views: views 
 

 
    { 
 
     "RecordedDate": moment("26/07/2016 00:00:00", 'DD/MM/YYYY HH:mm:ss').toDate(), 
 
     "Temperature": 98, 
 
     "Pulse": 100, 
 
     "BloodPressureSystolic": 120, 
 
     "BloodPressureDiastolic": 98, 
 
     "RespiratoryRate": 15, 
 
     "Weight": 50, 
 
     "Age": 18 
 
    }, 
 

 

 
    { 
 
     "RecordedDate": moment("27/07/2016 00:00:00", 'DD/MM/YYYY HH:mm:ss').toDate(), 
 
     "Temperature": 99.4, 
 
     "Pulse": 101, 
 
     "BloodPressureSystolic": 110, 
 
     "BloodPressureDiastolic": 112, 
 
     "RespiratoryRate": 98, 
 
     "Weight": 60, 
 
     "Age": 19 
 
    }, 
 

 

 
    { 
 
     "RecordedDate": moment("28/07/2016 00:00:00", 'DD/MM/YYYY HH:mm:ss').toDate(), 
 
     "Temperature": 100, 
 
     "Pulse": 102, 
 
     "BloodPressureSystolic": 109, 
 
     "BloodPressureDiastolic": 95, 
 
     "RespiratoryRate": 97, 
 
     "Weight": 66, 
 
     "Age": 20 
 
    } 
 

 
    ] 
 

 
    return chartData; 
 
} 
 

 
function zoomChart() { 
 
    chart.zoomToIndexes(chart.dataProvider.length - 20, chart.dataProvider.length - 1); 
 
}
#chartdiv2 { 
 
    width: 100%; 
 
    height: 500px; 
 
}
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script> 
 
<script src="https://www.amcharts.com/lib/3/serial.js"></script> 
 
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script> 
 
<link href="https://www.amcharts.com/lib/3/plugins/export/export.css" rel="stylesheet" /> 
 
<script src="https://www.amcharts.com/lib/3/plugins/export/export.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.js"></script> 
 
<div id="chartdiv2"></div>

我刚刚收到来自amCharts的消息支持我的机票,根据他的说法,他们不支持带有defau的颜色名称LT库,但要我用十六进制的颜色这里查看详细

阿里嗨,

您需要使用十六进制颜色( “#FF0000”)或RGB(“RGB(255,0,0消息)“ 您的颜色值。 fabric.js(由 导出插件使用的基础库)不支持命名的颜色,如“Orange”和 “Black”。

这是你更新的提琴:https://jsfiddle.net/6w4wkqgs/5/

希望这有助于。

谢谢大家帮忙解决问题。你们人很棒。

+0

开了一个[Issue](https://github.com/amcharts/export/issues/40),我刚刚收到来自amCharts的Anthony Piris的消息,据他说他们不支持颜色名称,但问我以使用十六进制颜色 嗨Ali, 您需要为您的颜色使用十六进制颜色(“#ff0000”)或rgb(“rgb(255,0,0)”值。fabric.js,使用的底层库导出插件,不支持命名的颜色,如“橙色”和“黑” 这是你更新的提琴:。https://jsfiddle.net/6w4wkqgs/5/ 希望这有助于 最佳, 安东尼Piris amCharts –

+1

这是来自fabricjs的一个限制,它不会解释所有颜色名称并返回“黑色”作为默认值。如上所述,我建议使用HEXadecimal或RGBA。 – Maertz

相关问题