Question

我对这里的答案不满意： 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],
    }]
});

Answer 1

所以这是我解决问题的方法。我希望这是你正在寻找的东西，我希望你觉得这很有帮助。

如果您想将数据分成三个类别并使用两个不同的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]
  },

Answer 2

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

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

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

＆＃13;

$(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
        }]
    });
});

＆＃13;

<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>

＆＃13;

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

我希望这对你有所帮助。

Highcharts将带有多个轴的条形图分组

2 个答案: