HighCharts - 如何左右对齐（对齐）xAxis标签答案

【问题标题】：HighCharts - how to align (justify) xAxis labels left and rightHighCharts - 如何左右对齐（对齐）xAxis标签
【发布时间】：2012-09-21 21:45:50
【问题描述】：

我想在下图中对齐 x 轴标签，并在左侧与 y 轴对齐，在右侧与 y 轴对齐：

这里是x轴和y轴系列的相关代码：

var chart2 = new Highcharts.Chart({
  chart: {
    renderTo: 'discount_chart',
    type: 'line'
  },
  title: {
    text: "#{title_text_sense}"
  },
  xAxis: {
    title: { text: 'Price Range - $' },
    categories: #{price_array},
    showLastLabel: true,
  },
  yAxis: [{
    min: 0,
    type: 'linear',
    title: { text: 'Rate of Return - %' }
  },{
    min: 0,
    type: 'linear',
    title: { text: 'Disc. N.Rev./Invest.(ROI)' },
    opposite: true
  }],

请注意，变量是从数据库中读取的，因此用于定义 x 轴的 price_array 包含此示例的这些值：

["$60.00","$70.00","$80.00","$90.00","$100.00"]

有没有办法在 HighCharts 中做到这一点？

谢谢。

巴拉特

【问题讨论】：

我不确定这个问题是否足够清楚，jsFiddle 也将不胜感激
您好 Jugal，感谢您的回复。这是一个 jsFiddle 链接：jsfiddle.net/rv46j/1
我想要做的是让 60.00 美元在 y 轴 0 的位置左对齐，从而消除图表线从左侧开始的空白区域。类似地，$100.00 应该是图表切断的位置，而不是在图表终止点（即 $100.00）之后留下空白区域。希望能澄清我的问题。

标签： highcharts axis

【解决方案1】：

感谢您的宝贵时间。对此，我真的非常感激。但我想通了。这是我发布的原始 jsFiddle 链接的一个分支。它正是我想做的。基本上，我删除了 xAxis 中的类别选项，然后使用了 xAxis 的自定义标签格式化程序；它对我有用。下面是

执行此操作的我的 Highcharts JavaScript 代码：

var x_labels = ["$60.00","$70.00","$80.00","$90.00","$100.00"];
var chart2 = new Highcharts.Chart({
    chart: {
        renderTo: 'discount_chart',
        type: 'line'
    },
    title: {
        text: "Big Wells 2 Economic Sensitivity Plot"
    },
    xAxis: {
        title: {
            text: 'Price Range - $'
        },
        labels: {
            formatter: function() {
                return x_labels[this.value];
            }
        },
        showLastLabel: true,
    },
    yAxis: [{
        min: 0,
        type: 'linear',
        title: {
            text: 'Rate of Return - %'
        }},
    {
        min: 0,
        type: 'linear',
        title: {
            text: 'Disc. N.Rev./Invest.(ROI)'
        },
        opposite: true}],
    tooltip: {
        formatter: function() {
            var seriesName = {
                'Rate of Return': 'ROR',
                'Return on Investment': 'ROI'
            }[this.series.name];
            return '<b>' + this.series.name + '</b><br/>Price = ' + x_labels[this.x] + ', ' + seriesName + ' = ' + (Math.round(this.y * 1000) / 1000);
        }
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'top',
        x: -20,
        y: 100,
        borderWidth: 0
    },
    plotOptions: {
        series: {
            marker: {
                enabled: false,
                states: {
                    hover: {
                        enabled: true
                    }
                }
            }
        }
    },
    series: [{
        name: 'Rate of Return',
        color: 'red',
        data: [-4.608072102337354, -0.738803860865155, 4.653294970652549, 8.92228974293352, 14.025752639875485],
        pointStart: 0},
    {
        name: 'Return on Investment',
        color: 'blue',
        data: [0.5863077142857144, 0.7098245714285715, 0.8340802857142857, 0.9587922857142858, 1.083803],
        pointStart: 0,
        yAxis: 1}]
});

jSFiddle Demo of above code to fork:

【讨论】：

先生，我很抱歉，但是您为什么要通过使用格式化程序并在图表选项之外维护一系列类别来完成它，因为它可以像 pointPlacement: "on" 一样轻松完成?
这是一个出色的解决方案，可以帮助我在使用类别与其他类型的数据时在轴上看到的奇怪偏移。非常感谢！

【解决方案2】：

您应该设置plotOptions.line.pointPlacement 属性

pointPlacement：字符串

可能的值：null、“on”、“between”。

在柱形图中，当 pointPlacement 为“on”时，该点不会创建 X 轴的任何填充。如果 pointPlacement 是“之间”，列将在刻度之间布置。例如，这很有用用于可视化两个时间点或某个特定时间点之间的数量极坐标图的扇区。默认为空。

虽然上面的 API 参考提到了柱形图，但它通常适用于任何类别图表。
由于不想填充，所以需要设置为"on"

plotOptions: {
    series: {            
        pointPlacement: "on"
    }
},

Category Charts starting from origin @ jsFiddle

【讨论】：