如何使用高图表绘制下面的图表？

Question

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

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