为amCharts中的errorFields和项目符号提供相同的颜色

Question

我想为项目符号和错误字段分配相同的颜色。但我不能。

另外，我右边的图例仅显示图形名称，但不显示项目符号。

var chart = AmCharts.makeChart( "chartdiv", {
  "type": "serial",
  "theme": "light",
  "dataDateFormat": "YYYY-MM-DD",
  "addClassNames": true,
  "legend": {
    "horizontalGap": 10,
    "maxColumns": 1,
    "position": "right",
    "useGraphSettings": true,
    "markerSize": 10
  },

  "dataProvider": [ {
    "date": "2015-06",
    "Panama Hat": "13.42",
    "error": 14.31
  }, {
    "date": "2015-07",
    "Unsinkable": "150.18",
    "error": 5.3
  }, {
    "date": "2015-07",
    "Panama Hat": "141.24",
    "error": 6.08
  }, {
    "date": "2015-07",
    "Unsinkable": "146.09",
    "error": 6.28
  }, {
    "date": "2015-09",
    "Unsinkable": "122.24",
    "error": 15.56
  }, {
    "date": "2015-09",
    "Panama Hat": "144.84",
    "error": 11.93
  }, {
    "date": "2015-10",
    "Unsinkable": "167.31",
    "error": 18.75
  } ],
  "valueAxes": [ {

    "maximum": 194.56,
    "minimum": -75.13,
    "dashLength": 5,
    "position": "left",
    "title": "SpeedFig",
    "id": "v1",
  } ],
  "startDuration": 0,
  "graphs": [ {
    "id": "g0",
    "balloonText": "Panama Hat<br>[[category]]: SPDFIG [[value]]<br>Error : [[error]]",
    "bullet": "yError",
    "bulletSize": 7,
    "errorField": "error",
    "lineThickness": 1,
    "valueField": "Panama Hat",
    "bulletAxis": "v1",
    "fillAlphas": 0,
    "lineAlpha": 0,
    "title": "Panama Hat"
  }, {
    "bullet": "round",
    "valueField": "Panama Hat",
    "lineAlpha": 0
  }, {
    "id": "g1",
    "balloonText": "Unsinkable<br>[[category]]: SPDFIG [[value]]<br>Error : [[error]]",
    "bullet": "yError",
    "bulletSize": 7,
    "errorField": "error",
    "lineThickness": 1,
    "valueField": "Unsinkable",
    "bulletAxis": "v1",
    "fillAlphas": 0,
    "lineAlpha": 0,
    "title": "Unsinkable"
  }, {
    "bullet": "round",
    "valueField": "Unsinkable",
    "lineAlpha": 0
  } ],
  "chartCursor": {
    "cursorAlpha": 0,
    "zoomable": false,
    "categoryBalloonDateFormat": "YYYY MMM DD",
    "oneBalloonOnly": true
  },
  "dataDateFormat": "YYYY-MM",
  "categoryField": "date",
  "categoryAxis": {
    "parseDates": true,
    "minPeriod": "MM",
    "dateFormats": [ {
      period: 'fff',
      format: 'JJ:NN:SS'
    }, {
      period: 'ss',
      format: 'JJ:NN:SS'
    }, {
      period: 'mm',
      format: 'JJ:NN'
    }, {
      period: 'hh',
      format: 'JJ:NN'
    }, {
      period: 'DD',
      format: 'MMM DD'
    }, {
      period: 'WW',
      format: 'MMM DD'
    }, {
      period: 'MM',
      format: 'MMM YYYY'
    }, {
      period: 'YYYY',
      format: 'MMM YYYY'
    } ],
  },
  "export": {
    "enabled": true,
    "libs": {
      "path": "http://www.amcharts.com/lib/3/plugins/export/libs/"
    }
  }

} );

Answer 1

您需要为使用共享相同valueField的两个图表设置相同的lineColor。这样，您将确保不会为自动分配不同的颜色。

至于传说。我建议您使用visibleInLegend: false隐藏图例中的辅助图表（用于显示子弹的图表）。

我还会从图例配置中删除useGraphSettings，并设置`marketType：“circle”。

以下是与上述变化相同的图表：

var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "theme": "light",
  "dataDateFormat": "YYYY-MM-DD",
  "addClassNames": true,
  "legend": {
    "horizontalGap": 10,
    "maxColumns": 1,
    "position": "right",
    "markerType": "circle",
    "markerSize": 10
  },

  "dataProvider": [{
    "date": "2015-06",
    "Panama Hat": "13.42",
    "error": 14.31
  }, {
    "date": "2015-07",
    "Unsinkable": "150.18",
    "error": 5.3
  }, {
    "date": "2015-07",
    "Panama Hat": "141.24",
    "error": 6.08
  }, {
    "date": "2015-07",
    "Unsinkable": "146.09",
    "error": 6.28
  }, {
    "date": "2015-09",
    "Unsinkable": "122.24",
    "error": 15.56
  }, {
    "date": "2015-09",
    "Panama Hat": "144.84",
    "error": 11.93
  }, {
    "date": "2015-10",
    "Unsinkable": "167.31",
    "error": 18.75
  }],
  "valueAxes": [{

    "maximum": 194.56,
    "minimum": -75.13,
    "dashLength": 5,
    "position": "left",
    "title": "SpeedFig",
    "id": "v1",
  }],
  "startDuration": 0,
  "graphs": [{
    "id": "g0",
    "balloonText": "Panama Hat<br>[[category]]: SPDFIG [[value]]<br>Error : [[error]]",
    "lineColor": "#67b7dc",
    "bullet": "yError",
    "bulletSize": 7,
    "errorField": "error",
    "lineThickness": 1,
    "valueField": "Panama Hat",
    "bulletAxis": "v1",
    "fillAlphas": 0,
    "lineAlpha": 0,
    "title": "Panama Hat"
  }, {
    "lineColor": "#67b7dc",
    "bullet": "round",
    "valueField": "Panama Hat",
    "lineAlpha": 0,
    "visibleInLegend": false
  }, {
    "id": "g1",
    "lineColor": "#fdd400",
    "balloonText": "Unsinkable<br>[[category]]: SPDFIG [[value]]<br>Error : [[error]]",
    "bullet": "yError",
    "bulletSize": 7,
    "errorField": "error",
    "lineThickness": 1,
    "valueField": "Unsinkable",
    "bulletAxis": "v1",
    "fillAlphas": 0,
    "lineAlpha": 0,
    "title": "Unsinkable"
  }, {
    "lineColor": "#fdd400",
    "bullet": "round",
    "valueField": "Unsinkable",
    "lineAlpha": 0,
    "visibleInLegend": false
  }],
  "chartCursor": {
    "cursorAlpha": 0,
    "zoomable": false,
    "categoryBalloonDateFormat": "YYYY MMM DD",
    "oneBalloonOnly": true
  },
  "dataDateFormat": "YYYY-MM",
  "categoryField": "date",
  "categoryAxis": {
    "parseDates": true,
    "minPeriod": "MM",
    "dateFormats": [{
      period: 'fff',
      format: 'JJ:NN:SS'
    }, {
      period: 'ss',
      format: 'JJ:NN:SS'
    }, {
      period: 'mm',
      format: 'JJ:NN'
    }, {
      period: 'hh',
      format: 'JJ:NN'
    }, {
      period: 'DD',
      format: 'MMM DD'
    }, {
      period: 'WW',
      format: 'MMM DD'
    }, {
      period: 'MM',
      format: 'MMM YYYY'
    }, {
      period: 'YYYY',
      format: 'MMM YYYY'
    }],
  },
  "export": {
    "enabled": true,
    "libs": {
      "path": "http://www.amcharts.com/lib/3/plugins/export/libs/"
    }
  }

});

<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv" style="width: 100%; height: 400px;"></div>