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

7ivaypg9 于 5个月前发布在 Highcharts

关注(0)|答案(1)|浏览(61)

我必须创建像下图这样的线图。当实际值超过计划值时，线颜色应该是绿色，否则在使用以下值的同一线图中，线颜色应该是红色

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', …}

字符串

的数据

highcharts

来源：https://stackoverflow.com/questions/77520736/how-change-color-of-line-graph-in-highchart-js

1条答案

按热度按时间

baubqpgj1#

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

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

赞(0）回复(0）举报 5个月前