为什么AmCharts导出颜色变为黑色和白色?
我使用的是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
}`
我的图表是默认丰富多彩这样的:
但是我下载到PDF后, PNG,JPG等,或单击Annotate...
菜单选项图表转为黑白(灰度)这样的形象:
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支持也参与帮助。
为@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/
希望这有助于。
谢谢大家帮忙解决问题。你们人很棒。
开了一个[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 –
这是来自fabricjs的一个限制,它不会解释所有颜色名称并返回“黑色”作为默认值。如上所述,我建议使用HEXadecimal或RGBA。 – Maertz
如果可能请在https://jsfiddle.net/或类似的服务上提供示例。 –
我的代码是写在ASP.Net MVC和一些剃须刀是包括可以jsfiddle会理解我的代码? –
我从浏览器中生成的代码制作一个JSFiddle我会回来一段时间的代码,请稍等,谢谢 –