分组不适用于javascript [英] Grouped categories not working in javascript

问题描述

我有一个高图（以条形图格式），我想在其中使用一个值（比如columnA）对条形图进行分组，然后使用columnA下的其他值（例如columnB和columnC）进一步细分条形图。 />
但我似乎无法正确使用，所显示的条形图的xAxis并不符合我的要求。以下是我的代码：

Hi, I have a highchart(in barchart format) in which I want to group the barcharts with a value(let say columnA), then further breakdown the barcharts with other values under columnA(e.g. columnB and columnC).
But I cant seems to get it right, the xAxis of the barcharts being displayed does not according to what I want. Below are my codes:

LoadHighchart: function () {
            $('#MyContainer').highcharts({
                chart: {
                    zoomType: 'x'
                },
                title: {
                    text: null
                },
                xAxis: {
                    categories: [{
                        name: columnA,
                        categories: [columnB, columnC]
                    //}],
                    crosshair: true
                },
                yAxis: [{
                    title: {
                        text: null
                    }
                }, {
                    title: {
                        text: null
                    },
                    opposite: true
                }],
                plotOptions: {
                    column: {
                        stacking: 'quantity'
                    },
                    spline: {
                        marker: {
                            enabled: true
                        }
                    },
                    series: {
                        cursor: 'pointer',
                        marker: {
                            lineWidth: 1
                        }
                    }
                },
                series: [{
                    type: 'column',
                    name: 'ColA',
                    data: columnA,
                }, {
                    type: 'spline',
                    name: 'ColB',
                    data: columnB,
                }, {
                    type: 'spline',
                    name: 'ColC',
                    data: columnC,
                    yAxis: 1,
                    tooltip: {
                        valueSuffix: '%'
                    }
                }]
            });

        },

我尝试了什么：



1.请参阅下面的示例链接但是没有按预期工作。

http://www.highcharts.com/plugin-registry / single / 11 / Grouped-Categories

What I have tried:

1. Refer to the example from below link but it did not work out as expected.
http://www.highcharts.com/plugin-registry/single/11/Grouped-Categories

推荐答案

（' #MyContainer'）。highcharts（{
chart：{
zoomType：' x'
}，
title：{
text： null
}，
xAxis：{
类别：[{
名称：columnA，
类别：[columnB，columnC]
// }]，
十字准线：< span class =code-keyword> true
}，
yAxis：[{
title：{
text： null
}
}，{
title：{
text： null
}，
对面： true
}]，
plotOptions：{
column：{
stacking： ' 数量'
}，
spline：{
marker： {
已启用： true
}
}，
series：{
cursor：' 指针'，
marker：{
lineWidth： 1
}
}
}，
系列：[{
类型：' column'，
name：' ColA'，
数据：columnA，
}，{
类型：' spline'，
name：' ColB'，
数据：columnB，
}，{
类型：' spline'，
名称：' ColC'，
data：columnC，
yAxis： 1 ，
工具提示：{
valueSuffix：' ％'
}
}]
}）;

}，

('#MyContainer').highcharts({ chart: { zoomType: 'x' }, title: { text: null }, xAxis: { categories: [{ name: columnA, categories: [columnB, columnC] //}], crosshair: true }, yAxis: [{ title: { text: null } }, { title: { text: null }, opposite: true }], plotOptions: { column: { stacking: 'quantity' }, spline: { marker: { enabled: true } }, series: { cursor: 'pointer', marker: { lineWidth: 1 } } }, series: [{ type: 'column', name: 'ColA', data: columnA, }, { type: 'spline', name: 'ColB', data: columnB, }, { type: 'spline', name: 'ColC', data: columnC, yAxis: 1, tooltip: { valueSuffix: '%' } }] }); },

我尝试了什么：



1.请参阅下面的示例链接但是没有按预期工作。

http://www.highcharts.com/plugin-registry / single / 11 / Grouped-Categories

What I have tried:

1. Refer to the example from below link but it did not work out as expected.
http://www.highcharts.com/plugin-registry/single/11/Grouped-Categories

检查这个

check this

var columnA = 'some';
            var columnB = 'BB';
            var columnC = 'CC';

（' ＃MyContainer'）。highcharts （{
chart：{
zoomType：' x'，
类型： 列
}，
title：{
text： null
}，
xAxis：{
categories：[{
name：columnA，
类别：[columnB，columnC]
}]，
十字准线： true
}，
yAxis：[{
标题：{
text： null
}
}，{
title：{
text：< span class =code-keyword> null
}，
对面： true
}]，
plotOptions：{
column：{
stacking：' quantity'
}，
spline：{
marker：{
enabled： true
}
} ，
系列：{
cursor：' 指针'，
标记：{
lineWidth： 1
}
}
}，
系列：[{
类型：' column'，
name：' ColA'，
data：[ 1 ， 2 ， 3 ]，

}]
}）;

('#MyContainer').highcharts({ chart: { zoomType: 'x', type: "column" }, title: { text: null }, xAxis: { categories: [{ name: columnA, categories: [columnB, columnC] }], crosshair: true }, yAxis: [{ title: { text: null } }, { title: { text: null }, opposite: true }], plotOptions: { column: { stacking: 'quantity' }, spline: { marker: { enabled: true } }, series: { cursor: 'pointer', marker: { lineWidth: 1 } } }, series: [{ type: 'column', name: 'ColA', data: [1,2,3], }] });

这篇关于分组不适用于javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！