通过amcharts

Question

我想改变折线图的颜色，就像他们使用负值一样 - ＆gt; https://www.amcharts.com/demos/date-based-line-chart/

不同之处在于我需要在过去特定指导线时更改颜色，在我的情况下我有四条引导线，在示例中我只能设置一个nagativebase和negativeLineColor。

谢谢！

Answer 1

您发布的链接谈到了negativeBase，它允许您设置不同的基线值以更改线条颜色。您可以将其设置为等于指导值，以达到您正在寻找的效果。

var chart = AmCharts.makeChart( "chartdiv", {
  // ...
  "valueAxes": [ {
    // ...
     "guides": [{
       "value": 20,
       // ...
     }],
    // ...
  } ],
  "graphs": [ {
    // ...
    "negativeLineColor": "#67b7dc",
    "negativeBase": 20,
    // ...
  } ],
  // ...
});

Demo

修改

开箱即用不支持多个底部基础，但是您可以使用不同的负基值将多个图形叠加在一起，同时禁用其气球并将其基础lineColor设置为transparent ：

  "graphs": [{
    "balloonText": "<div style='margin:5px; font-size:19px;'><span style='font-size:13px;'>[[category]]</span><br>[[value]]</div>",
    "bullet": "round",
    "bulletBorderAlpha": 0,
    "hideBulletsCount": 50,
    "lineThickness": 2,
    "negativeLineColor": "#ff0000",
    "negativeBase": 20,
    "valueField": "visits"
  },{
    "showBalloon": false,
    "bullet": "round",
    "bulletBorderAlpha": 0,
    "hideBulletsCount": 50,
    "lineColor": "transparent",
    "negativeLineColor": "#00ff00",
    "negativeBase": 10,
    "valueField": "visits"
  },{
    "showBalloon": false,
    "lineColor": "transparent",
    "bullet": "round",
    "bulletBorderAlpha": 0,
    "hideBulletsCount": 50,
    "negativeLineColor": "#0000ff",
    "negativeBase": -10,
    "valueField": "visits"
  },{
    "showBalloon": false,
    "bullet": "round",
    "bulletBorderAlpha": 0,
    "hideBulletsCount": 50,
    "lineColor": "transparent",
    "negativeLineColor": "#00ffff",
    "negativeBase": -20,
    "valueField": "visits"
  }],

Demo