javascript - 如何在Angular中使用 Highcharts ？

Question

我正在使用 Highcharts 堆叠柱形图。我可以获得天蓝色和白色的条形图，但我需要一个位于 24、41 和 49 y 轴点的条形图，如图所示。请帮助我实现这一目标。提前致谢。到目前为止我尝试过的代码。

export class AppComponent {
  title = 'Smaple';
  options = {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Stacked'
    },
    xAxis: {
        categories: ['data1', 'data2', 'data3', 'data4']
    },
    yAxis: {
        min: 0,
        tickInterval: 50,
        max: 100

    },
    tooltip: {
        headerFormat: '<b>{point.x}</b><br/>',
        pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
    },
    plotOptions: {
        column: {
            stacking: 'normal',
        },
        series: {
            borderColor: '#000'
        }
    },
    series: [{
        name: 'Total',
        data: [{ y: 20, color: "white"}]
    }, {
        name: 'Actual',
        data: [{ y: 80, color: "skyblue"}],
    }]
};

Answer 1

您可以使用Highcharts.SVGRenderer并在每列上渲染附加元素。首先使用renderer.rect创建三个矩形，然后 renderer.path在它们之间创建一条线。请注意，每次渲染图表时，您都必须销毁旧元素并渲染新元素。查看我在下面发布的演示。

HTML:

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>

JS:

Highcharts.chart('container', {
  chart: {
    type: 'column',
    events: {
      render: function() {
        var chart = this,
          series = chart.series[1],
          points = series.points,
          yAxis = chart.yAxis[0],
          customPoints = [
            24,
            41,
            49
          ],
          path = [],
          height = 7,
          element,
          width,
          x,
          y,
          i;

        if (chart.customElements) {
          chart.customElements.forEach(function(elem) {
            elem.destroy();
          });
        }

        chart.customElements = [];

        points.forEach(function(point) {
          if (point.series.visible) {
            x = point.plotX + chart.plotLeft;
            width = point.pointWidth * 0.2;

            for (i = 0; i < customPoints.length; i++) {
              y = yAxis.toPixels(customPoints[i]);

              if (i === 0) {
                path.push('M');
              } else {
                path.push('L');
              }

              path.push(x);
              path.push(y);

              element = chart.renderer.rect(x - (width / 2), y, width, height)
                .attr({
                  strokeWidth: 1,
                  fill: '#000'
                })
                .add()
                .toFront();

              chart.customElements.push(element);
            }

            element = chart.renderer.path(path)
              .attr({
                'stroke-width': 1,
                stroke: '#000',
                fill: '#000'
              })
              .add()
              .toFront();

            chart.customElements.push(element);
          }
        });
      }
    }
  },
  plotOptions: {
    column: {
      stacking: 'normal',
    },
    series: {
      borderColor: '#000'
    }
  },
  series: [{
    name: 'Total',
    data: [{
      y: 20,
      color: "white"
    }]
  }, {
    name: 'Actual',
    data: [{
      y: 80,
      color: "skyblue"
    }]
  }]
});

演示: https://jsfiddle.net/BlackLabel/hn96dfwm/