如何使用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

如何使用highchart绘制下图？

How to draw the below chart using highchart?

javascript

highcharts

angularjs