javascript - 如何使用highchart绘制下面的图表？

Question

请帮助我如何使用 highchart 绘制下面的图表。

Answer 1

我几乎可以肯定我已经在这里回答了这个问题，但我找不到它。
无论如何 - 要拆分图表，请使用 yAxis and xAxis plotLines您可以在 load 中动态计算哪个位置打回来。

  chart: {
    events: {
      load() {
        const chart = this,
          yAxis = chart.yAxis[0],
          xAxis = chart.xAxis[0];

        xAxis.addPlotLine({
          value: (xAxis.max + xAxis.min) / 2,
          color: 'grey',
          width: 2,
          dashStyle: 'dash'
        });

        yAxis.addPlotLine({
          value: (yAxis.max + yAxis.min) / 2,
          color: 'grey',
          width: 2,
          dashStyle: 'dash'
        });
      }
    }
  },

演示: https://jsfiddle.net/BlackLabel/5xL7o1kg/
API: https://api.highcharts.com/class-reference/Highcharts.Axis#addPlotLine

要着色，分割区域的部分使用 polygon系列类型。
演示: https://jsfiddle.net/BlackLabel/7smLnqad/

chart.addSeries({
  type: 'polygon',
  data: [
    [xAxis.min, yAxis.min],
    [(xAxis.max + xAxis.min) / 2, yAxis.min],
    [(xAxis.max + xAxis.min) / 2, (yAxis.max + yAxis.min) / 2],
    [xAxis.min, (yAxis.max + yAxis.min) / 2],
  ],
  color: 'rgba(244, 198, 245, 0.5)',
  showInLegend: false,
  enableMouseTracking: false,
})

API: https://api.highcharts.com/class-reference/Highcharts.Chart#addSeries