时间戳

首页 > 解决方案 > 在图表中显示 xrange x 和 x2 值

javascript - 在图表中显示 xrange x 和 x2 值

问题描述

如何在图表中显示最小值和最大值或 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/

标签： javascriptchartshighcharts

解决方案

如果我理解正确，您可以按照以下方法实现它：

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

演示：

2) 将 xAxis 标签位置设置为dataMinanddataMax并使用offset属性对其进行翻译：

代码：

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

演示：

API参考：

推荐阅读