Javascript 如何使用高角度图表？

我用的是高图叠柱条形图。我可以得到天蓝色和白色的条，但我需要一个点在24，41和49 y_轴点的条，如图所示。请帮助我实现这一目标。提前谢谢。到目前为止我试过的代码

导出类AppComponent{
标题='Smaple'；
选项={
图表：{
类型：“列”
},
标题：{
文本：“堆叠”
},
xAxis：{
类别：['data1'，'data2'，'data3'，'data4']
},
亚克斯：{
分:0,，
时间间隔：50，
最高：100
},
工具提示：{
headerFormat:“{point.x}
”，
pointFormat:“{series.name}:{point.y}
总计：{point.stackTotal}”
},
打印选项：{
专栏：{
堆叠：“正常”，
},
系列：{
边框颜色：“#000”
}
},
系列：[{
名称：'总计'，
数据：[{y:20，颜色：“白色”}]
}, {
名称：'实际'，
数据：[{y:80，颜色：“天蓝色”}]，
}]
}

您可以在每列上使用和渲染其他元素。首先使用创建三个矩形，然后创建用于绘制它们的线条。请注意，每次渲染图表时，您都必须销毁旧元素并渲染新元素。请查看我在下面发布的演示

HTML:

JS:

Highcharts.chart（'container'{
图表：{
键入：“列”，
活动：{
render:function（）{
var图表=此，
系列=图表。系列[1]，
点=系列点，
yAxis=chart.yAxis[0]，
自定义点=[
24,
41,
49
],
路径=[]，
高度=7，
元素，
宽度，
x,，
Y
我
if（图表自定义元素）{
chart.customElements.forEach（函数（elem）{
元素destroy（）；
});
}
chart.customElements=[]；
点。forEach（函数（点）{
if（点系列可见）{
x=point.plotX+chart.plotLeft；
宽度=点。点宽度*0.2；
对于（i=0；i

演示：

---

在本地运行时，单击“运行代码段”后是否会产生相同的错误？如果没有，请编辑您的帖子以包含错误。控制台中没有显示错误。我无法在图中所示的24、41和49个y_轴点的间隔内分割条蓝色部分。您能准备一个简化的yo演示吗带有示例数据的ur应用程序/图表（例如codesandbox）？Highcharts不提供这种类型的列系列，因此可能需要覆盖column series原型中的

drawGraph

方法。@WojciechChmiel我的codepen链接非常完美，谢谢。这里我需要对功能进行另一个小的添加。我想添加多个具有不同y_轴值的条。请帮助p也可以。提前谢谢。不客气。用多个条检查此演示：默认工具提示不能用于显示自定义点说明。您可以使用例如注释来显示自定义点上的

mouseover

事件时的点信息（SVGElement）发生。请检查我为您准备的演示：。尝试这样导入：

import*作为“highcharts/modules/annotations”中的AnnotationsModule；

然后初始化：

AnnotationsModule（highcharts）

。请使用我鼓励您使用的

highcharts angular

包装检查此演示：。您正在使用npm页面上可以看到的弃用包“highcharts annotations”。annotations是Highstock 6+和highcharts 6+模块的一部分。修复了演示：。

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

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"
    }]
  }]
});