如何使用highcharts绘制单线图

Question

我尝试使用highcharts.js创建单线图，其阈值为100且为多色。对于大于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/

输出：