Question

我正在尝试在堆积条形图上添加辅助y轴。我希望y轴对应于提供的类别。

jsfiddle - http://jsfiddle.net/akshayasharma/qf3escqn/2/

$(function () {
    Highcharts.chart('container', {
        chart: {
            zoomType: 'xy'
        },
        title: {
            text: 'Average temperature and rainfall of first quarter'
        },
        subtitle: {
            text: 'Source: WorldClimate.com'
        },
        xAxis: [{
            categories: ['Rainfall', 'Temperature'],
            crosshair: true
        }],
        yAxis: [{ // Primary yAxis
            labels: {
                format: '{value}°C',
                style: {
                    color: Highcharts.getOptions().colors[1]
                }
            },
            title: {
                text: 'Temperature',
                style: {
                    color: Highcharts.getOptions().colors[1]
                }
            }
        }, { // Secondary yAxis
            title: {
                text: 'Rainfall',
                style: {
                    color: Highcharts.getOptions().colors[0]
                }
            },
            labels: {
                format: '{value} mm',
                style: {
                    color: Highcharts.getOptions().colors[0]
                }
            },
            opposite: true
        }],
        tooltip: {
            shared: true
        },
        legend: {
            align: 'center',
            verticalAlign: 'bottom',
            backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
        },
        plotOptions: {
            column: {
                stacking: 'normal'
            }
        },
        series: [{
            name: 'Jan',
             type: 'column',
            data: [49.9, 7]
        }, {
            name: 'Feb',
             type: 'column',
            data: [71.5, 6.9]
        }, {
            name: 'Mar',
             type: 'column',
            data: [106.4, 9.5]
        }]
    });
});

在上面的示例中，我只想要两个堆叠的条形图 - 一个显示降雨，另一个显示温度，这些堆叠的条形应与不同的y轴相关联。温度应该是主要的y轴（标记为C级），降雨应该是次要的y轴（标记为mm）。

每个堆栈将显示与相应月份的降雨/温度相对应的值。

有人可以告诉我如何为降雨和温度分配yAxis。由于我将系列数据作为一系列月份（1月，2月和3月）的系列数据，而我希望我的yaxis具体提供降雨和温度等类别。

Answer 1

这是可能的，但你可以为一个轴指定一个系列 - 所以你需要拆分你的系列如下：

series: [{
  name: 'Jan',
  id: 'j',
  data: [
    [0, 49.9]
  ],
  colorIndex: 0
}, {
  linkedTo: 'Jan',
  data: [
    [1, 7]
  ],
  colorIndex: 0,
  yAxis: 1
}, {
  id: 'f',
  name: 'Feb',
  data: [
    [0, 71.5]
  ],
  colorIndex: 1,
}, {
  linkedTo: 'f',
  data: [
    [1, 6.9]
  ],
  colorIndex: 1,
  yAxis: 1
}, {
  id: 'm',
  name: 'Mar',
  data: [
    [0, 106.4]
  ],
  colorIndex: 2
}, {
  linkedTo: 'm',
  data: [
    [1, 9.5]
  ],
  colorIndex: 2,
  yAxis: 1
}]

示例：http://jsfiddle.net/qf3escqn/4/

带有多个yAxis的堆积条形图

1 个答案: