我使用的是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我會回來一段時間的代碼,請稍等,謝謝 –