Question

如何在图表中显示最小值和最大值或x和x2值，以及需要部分填充值而不是％。

min = 0;
max = 150;
y=95; //points scored.

{
    showInLegend: false,
    pointWidth: 25,
    data: [{
      x: 0,
      x2: 150,
      y: 0,
      partialFill: 0.75
    }],
    dataLabels: {
      enabled: true
    }
  }

0 ------------------- 95点--------------- 150

小提琴示例：https://jsfiddle.net/bv4uyazq/

Answer 1

如果我对您的理解正确，则可以通过以下方法实现：

1）使用SVGRenderer渲染自定义标签：

代码：

chart: {
  type: 'xrange',
  events: {
    render: function() {
      var chart = this,
        offsetTop = -8,
        offsetLetf = 5,
        x1,
        x2,
        y,
        label1,
        label2,
        label2BBox;

      if (chart.customLabels && chart.customLabels.length) {
        chart.customLabels.forEach(function(label) {
          label.destroy();
        });
      }

      chart.customLabels = [];

      chart.series[0].points.forEach(function(point) {

        x1 = point.plotX + chart.plotLeft + offsetLetf;
        x2 = x1 + point.shapeArgs.width - 2 * offsetLetf;
        y = point.plotY + chart.plotTop + point.shapeArgs.height / 2 + offsetTop;

        label1 = chart.renderer.text(chart.xAxis[0].dataMin, x1, y).css({
          fill: '#fff'
        }).add().toFront();

        label2 = chart.renderer.text(chart.xAxis[0].dataMax, x2, y).css({
          fill: '#fff'
        }).add().toFront();

        label2BBox = label2.getBBox();
        label2.translate(-label2BBox.width, 0);

        chart.customLabels.push(label1);
        chart.customLabels.push(label2);
      });
    }
  }
}

演示：

https://jsfiddle.net/BlackLabel/twuv96ex/1/

2）将xAxis标签位置设置为dataMin和dataMax，并使用offset属性对其进行翻译：

代码：

  xAxis: {
    type: 'linear',
    visible: true,
    offset: -110,
    tickPositioner: function() {
      return [this.dataMin, this.dataMax];
    }
  }

演示：

https://jsfiddle.net/BlackLabel/m7s4pfo5/

API参考：

在图表中显示xrange x和x2值

1 个答案: