我使用的是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支持也参与帮助。
如果可能请在https://jsfiddle.net/或类似的服务上提供示例。 –
我的代码是写在ASP.Net MVC和一些剃须刀是包括可以jsfiddle会理解我的代码? –
我从浏览器中生成的代码制作一个JSFiddle我会回来一段时间的代码,请稍等,谢谢 –