如何更改 Highchart.js 中折线图的颜色

Question

我必须创建如下图所示的折线图。当实际值超过计划值时，线条颜色应为绿色，否则在使用以下值的同一折线图中，线条颜色应为红色

lstMonth : Array(48) 0 : Actual : "74" Chart_Code : "SACL\S&M\Over All\R0" From : null GraphModel : null GraphTitle : "Overall Achievement " GraphType : "" Graph_Better : "1" Graph_Better2 : "0" Id : null Last_Year_Actual : "99" Month : "Apr" PageNo : "3" Plan : "100" Plan_revised : "" Policy_Ref_No : "OverAll" Responsible : "SL" Revision_No : "0" ScissorType : "0" To : null UOM : "%" Variance : "" pagetitle : null [[Prototype]] : Object 1 : {Id: null, Policy_Ref_No: 'OverAll', Chart_Code: 'SACL\S&M\Over All\R0', Month: 'May', Plan: '100', …} 2 : {Id: null, Policy_Ref_No: 'OverAll', Chart_Code: 'SACL\S&M\Over All\R0', Month: 'Jun', Plan: '100', …} 3 : {Id: null, Policy_Ref_No: 'OverAll', Chart_Code: 'SACL\S&M\Over All\R0', Month: 'Jul', Plan: '100', …} 4 : {Id: null, Policy_Ref_No: 'OverAll', Chart_Code: 'SACL\S&M\Over All\R0', Month: 'Aug', Plan: '100', …} 5 : {Id: null, Policy_Ref_No: 'OverAll', Chart_Code: 'SACL\S&M\Over All\R0', Month: 'Sep', Plan: '100', …} 6 : {Id: null, Policy_Ref_No: 'OverAll', Chart_Code: 'SACL\S&M\Over All\R0', Month: 'Oct', Plan: '100', …} 7 : {Id: null, Policy_Ref_No: 'OverAll', Chart_Code: 'SACL\S&M\Over All\R0', Month: 'Nov', Plan: '100', …} 8 : {Id: null, Policy_Ref_No: 'OverAll', Chart_Code: 'SACL\S&M\Over All\R0', Month: 'Dec', Plan: '100', …} 9 : {Id: null, Policy_Ref_No: 'OverAll', Chart_Code: 'SACL\S&M\Over All\R0', Month: 'Jan', Plan: '100', …} 10 : {Id: null, Policy_Ref_No: 'OverAll', Chart_Code: 'SACL\S&M\Over All\R0', Month: 'Feb', Plan: '100', …} 11 : {Id: null, Policy_Ref_No: 'OverAll', Chart_Code: 'SACL\S&M\Over All\R0', Month: 'Mar', Plan: '100', …}

Answer 1

您可以根据您的数据动态计算区域。例如：

const processedData = data.map(dataEl => [dataEl.Motnh, +dataEl.ActualValue]);
const zones = data.map((dataEl, index) => ({
  value: index,
  color: +dataEl.ActualValue > +dataEl.Plan ? 'green' : 'red'
}));

Highcharts.chart('container', {
  xAxis: {
    type: 'category'
  },
  series: [{
    zoneAxis: 'x',
    data: processedData,
    zones
  }]
});

---

现场演示：https://jsfiddle.net/foLx4vd1/

API 参考： https://api.highcharts.com/highcharts/series.line.zones