1

我对这里的答案不满意： Multiple y-axes for column graph categories in highcharts

我知道您可以创建多个 y 轴，可以使用 yAxis:0,1,2 等为每个系列选择它们。是否可以对条形图组执行此操作？

在下面的示例中，我想要 3 个组（计数 A、计数 B、百分比），每个组有 4 人（John、Joe、Jane、Janet）。除了在一个轴上设置计数组和在另一轴上设置百分比组之外，我该怎么做？

$('#container').highcharts({
    chart: { type: 'column' },
    xAxis: { categories: ['Count A', 'Count B', 'Percent']},
    yAxis: [{ title: { text: 'Count' } }, { title: { text: 'Percent' }, opposite: true }],

    series: [{
        name: 'John',
        data: [5, 3, 0.4],
    }, {
        name: 'Joe',
        data: [3, 4, 0.6],
    }, {
        name: 'Jane',
        data: [2, 5, 0.7],
    }, {
        name: 'Janet',
        data: [3, 0, 0.8],
    }]
});
4

2 回答 2

6

所以这是我对你的问题的解决方案。我希望这是您正在寻找的内容，并且希望对您有所帮助。

当您想将数据分为具有两个不同 yAxis' 的三个类别时，您必须像这样将其分成系列。百分比与具有值的系列相关联。

如果您希望它返回柱形图，只需将图表类型更改为柱形。

http://jsfiddle.net/henrikskar/j1o450z5/

series: [{
       name: 'John',
       id: 's1',
       data: [5, 3],
  },{
        //Links to id s1
     linkedTo: 's1',
     name: 'John',
     data: [
           //Puts 0.4 percent to the third category which is in the second array position
           //of the categories
           [2, 0.4]
     ],
     //Assigns the percent to the second yAxis
     yAxis: 1,
     color: Highcharts.getOptions().colors[0]
  },
于 2016-08-11T14:17:23.627 回答
1

是的，这绝对是可能的，而且您对多个 y 轴的研究走在了正确的轨道上。

下面是基于 Highcharts 的堆叠和分组列演示的代码片段。我添加了第二个 y 轴并复制了一些演示数据以分配给该轴。

根据您的要求，您会发现分配给第一个/默认 y 轴的两组数据或堆栈数据，以及分配给第二个/相反 y 轴的第三组数据。

$(function () {
    $('#container').highcharts({

        chart: {
            type: 'column'
        },

        title: {
            text: 'Total fruit consumtion, grouped by gender'
        },

        xAxis: {
            categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
        },

        yAxis: [{
            allowDecimals: false,
            min: 0,
            title: {
                text: 'Number of fruits'
            }
        },{
            allowDecimals: false,
            min: 0, max: 100,
            title: {
                text: 'Percentage of fruits'
            },
            opposite: true
        }],

        tooltip: {
            formatter: function () {
                return '<b>' + this.x + '</b><br/>' +
                    this.series.name + ': ' + this.y + '<br/>' +
                    'Total: ' + this.point.stackTotal;
            }
        },

        plotOptions: {
            column: {
                stacking: 'normal'
            }
        },

        series: [{
            name: 'John',
            data: [5, 3, 4, 7, 2],
            stack: 'number'
        }, {
            name: 'Joe',
            data: [3, 4, 4, 2, 5],
            stack: 'number'
        }, {
            name: 'Jane',
            data: [2, 5, 6, 2, 1],
            stack: 'number2'
        }, {
            name: 'Janet',
            data: [3, 0, 4, 4, 3],
            stack: 'number2'
        },{
            name: 'John',
            data: [45, 30, 25, 70, 5],
            stack: 'percentage',
            yAxis: 1
        }, {
            name: 'Joe',
            data: [25, 15, 40, 5, 5],
            stack: 'percentage',
            yAxis: 1
        }, {
            name: 'Jane',
            data: [10, 50, 30, 5, 10],
            stack: 'percentage',
            yAxis: 1
        }, {
            name: 'Janet',
            data: [20, 5, 5, 20, 80],
            stack: 'percentage',
            yAxis: 1
        }]
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="width: 600px; height: 250px; margin: 0 auto"></div>

一条建议：与不同轴上的折线图一样，您需要在文档、颜色选择或图表标签中明确说明，以便用户知道哪些值对应于哪个轴。这对于列尤其需要，因为用户自然会将每列的高度与其相邻列进行比较。

我希望这对你有帮助。

于 2016-08-11T11:17:21.893 回答