2016-07-27 168 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

相關問題