为什么 AmCharts 导出颜色会变成黑色和白色？
Why does AmCharts export change color to black and white?
我正在使用 AmCharts，除 Export.
外，一切正常
我正在为 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 建议
This seems to be bug with the export plugin. It looks like the colors aren't recognized properly. If you change all colors to lower case the "standard" colors (like e.g. orange) work. You can fix this using HEX color codes by now.
我尝试将颜色名称 Green 更改为 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 支持人员的消息，据他说他们不支持默认库的颜色名称，但要求我使用十六进制颜色，这里是消息的详细信息
Hi Ali,
You need to use hexidecimal colors ("#ff0000")or rgb ("rgb(255, 0, 0)"
values for your colors. fabric.js, the underlying library used by the
export plugin, does not support named colors such as "Orange" and
"Black".
Here's your updated fiddle: https://jsfiddle.net/6w4wkqgs/5/
Hope this helps.
感谢大家帮忙解决问题。你们真棒
我正在使用 AmCharts，除 Export.
外，一切正常我正在为 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 建议
This seems to be bug with the export plugin. It looks like the colors aren't recognized properly. If you change all colors to lower case the "standard" colors (like e.g. orange) work. You can fix this using HEX color codes by now.
我尝试将颜色名称 Green 更改为 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 支持人员的消息，据他说他们不支持默认库的颜色名称，但要求我使用十六进制颜色，这里是消息的详细信息
Hi Ali,
You need to use hexidecimal colors ("#ff0000")or rgb ("rgb(255, 0, 0)" values for your colors. fabric.js, the underlying library used by the export plugin, does not support named colors such as "Orange" and "Black".
Here's your updated fiddle: https://jsfiddle.net/6w4wkqgs/5/
Hope this helps.
感谢大家帮忙解决问题。你们真棒