Question

我想对齐x轴标签并在左侧与y轴齐平，并在右侧向右冲到y轴，如下图所示：

enter image description here

以下是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中执行此操作？

感谢。

巴勒特

Answer 1

感谢您的时间。对此，我真的非常感激。但我想出来了。这是我发布的原始jsFiddle链接的一个分支。它完全符合我的要求。基本上，我删除了xAxis中的categories选项，然后使用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:

Answer 2

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

pointPlacement：String

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

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

虽然上面的API参考文章提到了柱形图，但它一般适用于任何类别图表由于您不需要填充，因此需要将其设置为"on"

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

Category Charts starting from origin @ jsFiddle

HighCharts - 如何左右对齐（证明）xAxis标签

2 个答案: