ハイチャートを使用して単線グラフを描画する方法

Question

しきい値が100でマルチカラーのhighcharts.jsを使用して単線グラフを作成しようとしています。 100を超える数の場合は線が赤で、100より小さい数の場合は線が青くなります。私は絵と同じものを持っていたいと思います。何かご意見は？別のライブラリの解決策がある場合は、それを感謝します。

Answer 1

あなたは棒グラフを使用して、動的データに基づいて生成された勾配、でそれを色付けすることができます。

const data = [50, 95, 124, 78, 60, 108, 108, 120, 155, 87, 57, 76] 
const colors = Highcharts.getOptions().colors 
const options = { 
    plotOptions: { 
    bar: { 
     pointWidth: 10 
    } 
    }, 
    tooltip: { 
    enabled: false 
    }, 
    series: [{ 
    color: { 
     linearGradient: { 
     x1: 0, 
     x2: 0, 
     y1: 0, 
     y2: 1 
     }, 
     stops: data.map((v, i) => { 
     return [ 
      i/data.length, v > 100 ? colors[5] : colors[0] 
     ] 
     }) 
    }, 
    data: [100], 
    type: 'bar' 
    }] 
} 

const chart = Highcharts.chart('container', options) 

ライブ例：https://jsfiddle.net/cn3aj3jd/

出力：