Question

默认情况下，x轴和y轴的刻度位于底部和底部。您可以在此处看到图表的左侧：http://jsfiddle.net/z7eyv/60/

我希望它们与绘图线（x轴和y轴）相邻。以下是我希望实现的目标：imgur.com/a/tf53t

我知道我可以使用offset：将比例移动到特定的像素位置，但如果我更改任一轴上的最大/最小值，它们就不再与绘图线对齐。

我在下面的代码中标注了我认为偏移的位置，但我不确定在它之后输入什么。

以下是相关代码的具体部分：

yAxis: {
min: -20,
  max: 20,
  tickInterval: 1,
    endOnTick: false,

    title: {
        text: ''
    },
    plotLines: [{
        value: 0.1,
        width: 1,
        color: 'black'}]
},
 plotOptions: {
        series: {
            states: {
                hover: {
                    enabled: false,
                    halo: {
                        size: 0
                    }
                }
            }
        }
    },
  xAxis: {
  min: -20,
  max: 14,
  tickInterval: 1,
   gridLineWidth: 1,
    endOnTick: false,
    offset: //???????????????????????????????????????
    title: {
        text: '', 

    },
    plotLines: [{
        value: 0.1,
        width: 1,
        color: 'black'}]
},

Answer 1

正如我在评论中提到的，你可以使用Highcharts插件库中提供的'crossing-specific-values'插件： https://www.highcharts.com/plugin-registry/single/6/Crossing-Specific-Values

您应该能够使用labels.y选项来上下移动标签 http://api.highcharts.com/highcharts/yAxis.labels.y

您还应该能够使用labels.formatter从标签中禁用0值： http://api.highcharts.com/highcharts/yAxis.labels.formatter

  yAxis: {
    min: -20,
    max: 20,
    crossing: 0,
    labels: {
      formatter: function() {
        return this.value ? this.value : ''
      }
    },

    tickInterval: 1,
    endOnTick: false,

    title: {
      text: ''
    },
    plotLines: [{
      value: 0.1,
      width: 1,
      color: 'black'
    }]
  },
  plotOptions: {
    series: {
      states: {
        hover: {
          enabled: false,
          halo: {
            size: 0
          }
        }
      }
    }
  },
  xAxis: {
    min: -20,
    max: 14,
    crossing: 0,
    opposite: true,
    visible: true,
    tickInterval: 1,
    gridLineWidth: 1,
    endOnTick: false,
    labels: {
      y: 13,
      formatter: function() {
        return this.value ? this.value : ''
      }
    },
    title: {
      text: '',

    },
    plotLines: [{
      value: 0.1,
      width: 1,
      color: 'black'
    }]
  },

示例：

http://jsfiddle.net/z7eyv/71/

如何将HighCharts图表上的比例与轴而不是边距对齐？

1 个答案: