【问题标题】:HighCharts xAxis show on 0 line with tick marks between all columnsHighCharts xAxis 显示在 0 行,所有列之间都有刻度线
【发布时间】:2019-04-11 00:09:01
【问题描述】:

我在 HighCharts 云中开发了一堆具有正值和负值的条形图。

第一个问题:

  • 是否可以让 xAxis 出现在 0 行(而不是图表底部)?

到目前为止,我所做的是偏移 xAxis,因此它被放置在 0 线上,这有点工作,但我希望有一个更好的解决方案。我认为的另一种方法是在 yAxis 上使用 plotLines 代码,但我没有得到刻度:

plotLines: [{
        color: '#010101',
        width: 2,
        value: 0,
        zIndex: 5
    }],

第二个问题:

  • 是否可以在每个条形之间显示刻度线,而不仅仅是具有 xAxis 标签的条形?

这就是目前为我呈现的内容,我试图在所有条形之间打勾,同时显示相同数量的标签https://cloud.highcharts.com/show/cLtfEDClS

【问题讨论】:

    标签: highcharts


    【解决方案1】:

    第一个问题: 您可以将此配置合并到 Cloud 的自定义代码部分中的图表选项中:

      chart: {
        events: {
          load: function() {
            var yAxis = this.yAxis[0];
            this.xAxis[0].update({
              offset: -yAxis.toPixels(Math.abs(yAxis.min), true)
            });
          }
        }
      },
    

    演示http://jsfiddle.net/BlackLabel/6712zrod/

    它会自动定位 x 轴,使其像y = 0 线一样工作。

    第二个问题:

    尝试将X Axis[0] > Labels > Step 设置为1

    API 参考: https://api.highcharts.com/highcharts/xAxis.labels.step

    说明来自文档:

    要仅显示轴上的每个第 n 个标签,请将步长设置为 n。将步长设置为 2 显示每隔一个标签。 默认情况下,会自动计算步长以避免重叠。为了防止这种情况,请将其设置为 1。这通常只发生在类别轴上,并且通常表明您选择了错误的轴类型。

    【讨论】:

      猜你喜欢
      • 2016-02-06
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2019-12-22
      相关资源
      最近更新 更多