1

我想在下图中对齐 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 中做到这一点？

谢谢。

巴拉特

4

2 回答 2

3

谢谢你的时间。对此，我真的非常感激。但我想通了。这是我发布的原始 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 fork：

于 2012-09-22T17:50:21.260 回答
2

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

点位：字符串

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

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

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

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

从 origin @ jsFiddle 开始的类别图表

于 2012-09-22T17:24:30.263 回答