Html 如何使用highcharts绘制单线图

我正在尝试使用highcharts.js创建一个单线图，它的树状图为100，并且是多色的。对于大于100的数字，线条为红色；对于小于100的数字，线条应为蓝色。我想要和照片一样的东西。有什么想法吗？如果有其他库的解决方案，我将不胜感激

---

您可以使用条形图，并根据数据动态生成渐变色

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)

实例：

---

输出：

您可以使用条形图，并根据数据动态生成渐变色

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)

实例：

---

输出：

Highcharts没有现成的方法来执行此操作。根据具体要求，您可以通过预先处理数据以设置适当的颜色来实现所需的结果，方法是使用每段具有单独序列的

'线条

图表，或者使用每段具有不同点的倒置

柱状范围

图表，或者我可以尝试使用

热图

，这将更好地处理颜色确定，但在处理分段时需要更多的组织。Highcharts没有一种方法可以做到这一点，如前所述，即开箱即用。根据具体要求，您可以通过预先处理数据以设置适当的颜色来实现所需的结果，方法是使用每段具有单独序列的

'线条

图表，或者使用每段具有不同点的倒置

柱状范围

图表，或者我可以尝试使用

热图

，这将更好地处理颜色确定，但在处理片段时需要更多的组织。很好！非常感谢！谢谢