如何在highcharts中将tickPositions显示为每个小节的开始和结束?

问题描述

我有一个带有多个条形图的条形图.每个条形图代表一个具有开始范围和结束范围的范围.请参阅附件图片.

I have a bar chart with multiple bars. Each bar is representing a range with a start range and an end range. Please see the attached image.

我要寻找的是将tickPositions(17和5)对齐到每个条与图像中用红色标记的yaxis相交的点.通过指定pointPlacement，我可以手动执行此操作.但是，当动态生成带有动态值的图表时，效果似乎不太好.

What I'm looking for is to align the tickPositions(17 and 5) at the point where each bar meets the yaxis marked in red in the image. By specifying pointPlacement I was able to manually do so. But when the chart is generated on the fly with dynamic values it doesn't seem to work good.

任何帮助将不胜感激.提前致谢.请参见下面的代码

Any help would be much appreciated. Thanks in advance. Please see the code below

Highcharts.chart('container', {
  chart: {
    type: 'bar',
    //marginLeft: 150
  },

  xAxis: {
    type: 'category',
    title: {
      text: null
    },
    max: 25,
    min: 0,
    reversed:false,
    tickPositions : [5,17]
    //tickLength: 1
  },
  yAxis: {
   // min: 0,
   // max: 10,
    title: {
      text: 'Votes',
      align: 'high'
    }
  },
  legend: {
    enabled: false
  },
  credits: {
    enabled: false
  },
  plotOptions: {
            series: {

              borderColor: '#303030',
              color : '#cac9c9'
            },

          },
  series: [{
    name: 'Votes',
    data: [
      [5, 0],
      [17, 10],


    ],
    dataLabels: {
      //enabled: true,
      color: '#333',
      //inside: true
    }
  }]
});

推荐答案

您可以在创建图表后检查列位置，将像素转换为轴值并动态设置刻度位置:

You can check the column position after chart creation, convert pixels to axis value and set tick positions dynamically:

events: {
  load: function() {
    var point = this.series[0].points[0],
      xAxis = this.xAxis[0],
      x1 = xAxis.toValue(point.shapeArgs.x + this.plotTop),
      x2 = xAxis.toValue(
        point.shapeArgs.x + point.shapeArgs.width + this.plotTop
      );

    xAxis.update({
      tickPositions: [x1, x2]
    });
  }
}

---

实时演示: http://jsfiddle.net/BlackLabel/fdtaow47/

API参考:

https://api.highcharts.com/class-reference/Highcharts .Axis#toValue

https://api.highcharts.com/highcharts/chart.events.load

这篇关于如何在highcharts中将tickPositions显示为每个小节的开始和结束?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！