如何开发带有框注释的自定义图表，如附件图像

Question

如何开发带有外部框注释的图表，其中注释将位于外部框以及每个图值的标记线。

highcharts #JScript

chart should be like this image

我的代码：

		Highcharts.chart('container', {

    title: {
        text: 'Highcharts Annotations'
    },

    subtitle: {
        text: 'Annotation label position options'
    },

    series: [{
        keys: ['y', 'id'],
        data: [[29.9, '0'], [71.5, '1'], [106.4, '2'], [129.2, '3'], [144.0, '4'], [176.0, '5'], [176.0, '6']]
    }],

    tooltip: {
        enabled: false
    },

    annotations: [{
        labels: [{
            //verticalAlign: 'top', top by default
            // align: 'right',
            distance: 250,             
            point: '0',
             width: 100
            // height: 16
            
        }, {
            //verticalAlign: 'top', top by default
            align: 'right',
            point: '1'
        }, {
            //align: 'center', center by default
            verticalAlign: 'top',
            point: '2'
        }, {
            x: 50,
            point: '3'
        }, {
            distance: 220,
            point: '4',
             width: 100
        }],
        labelOptions: {
            point: '1',
            y: 0,
            allowOverlap: true
        }
    }]
});

#container {
	max-width: 800px;
	margin: 0 auto;
}	

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/annotations.js"></script>

<div id="container" style="height: 400px; margin-top: 1em"></div>

我不是highchart专家，我曾尝试绘制2个值，但我无法管理装箱并定位在精确位置的注释。

需要帮助！

Answer 1

如果要为点分配注释并将它们对齐在一条直线中，则必须为每个注释标签指定单独的y位置。我创建了一个示例，说明如何以编程方式完成它。

var annotation = {
  labels: [{
    point: '0'
  }, {
    point: '1'
  }, {
    point: '2'
  }, {
    point: '3'
  }, {
    point: '4'
  }, {
    point: '5'
  }],
  labelOptions: {
    crop: false,
    shape: 'connector',
    allowOverlap: true,
    overflow: 'none'
  }
}

Highcharts.chart('container', {
  legend: {
    itemMarginTop: 40
  },
  chart: {
    events: {
      load: function() {
        var chart = this,
          points = chart.series[0].points;
        Highcharts.each(annotation.labels, function(el) {
          Highcharts.each(points, function(point) {
            if (el.point === point.id) {
              el.y = chart.plotHeight - point.plotY + 50
            }
          });
        });

        this.addAnnotation(annotation)
      }
    }
  },
  series: [{
    keys: ['y', 'id'],
    data: [
      [29.9, '0'],
      [71.5, '1'],
      [106.4, '2'],
      [129.2, '3'],
      [144.0, '4'],
      [176.0, '5'],
      [176.0, '6']
    ]
  }],
  tooltip: {
    enabled: false
  }
});

实时演示：http://jsfiddle.net/BlackLabel/5xn97ac8/

API：https://api.highcharts.com/highstock/annotations.labelOptions.y