Question

我正在使用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支持也参与帮助，我将非常感激。

Answer 1

as @gerric Suggested

这似乎是导出插件的错误。看起来颜色无法正确识别。如果将所有颜色更改为小写，则“标准”颜色（例如橙色）起作用。您现在可以使用HEX颜色代码解决此问题。

我尝试将颜色名称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支持我的票据的消息，据他说他们不支持使用默认库的颜色名称，但要求我使用十六进制颜色这里是详细信息

嗨阿里，

你需要使用十六进制颜色（“＃ff0000”）或rgb（“rgb（255,0,0）”   颜色的值。 fabric.js，使用的底层库   导出插件，不支持命名颜色，如“橙色”和   “黑”。

以下是您更新的小提琴：https://jsfiddle.net/6w4wkqgs/5/

希望这有帮助。

感谢大家帮忙解决问题。你的人很棒。

为什么AmCharts出口颜色变为黑白？

1 个答案: