带分组列的样条线高度图 [英] Splines with Grouped Columns highcharts
问题描述
这是我拥有的。
有没有办法将Splines和HighCharts中的分组合并在一起？ ol>
此外，我还希望Spline点位于每一列的中间位置。
< a href =http://jsfiddle.net/3SjWT/8/ =nofollow> http://jsfiddle.net/3SjWT/8/
这甚至有可能吗？
感谢您！
代码：
$（function（）{
$（'＃container'）。highcharts（{
图表：{}，
title：{
文本：'组合图'
}，
xAxis：{
categories：['North'，'East'，'West'，'South']，
gridLineWidth： 0
}，
yAxis：[{//小学yAxis
gridLineWidth：0，
标签：{
style：{
color：'＃89A54E'
}
}，
title：{
text：'Sales'，
style：{
color： '＃89A54E'
}
}
}，{//辅助yAxis
标题：{
text：'利润％'，
风格：{
color：Highch arts.getOptions（）。colors [3]
}
}，
标签：{
style：{
color：'＃4572A7'
相反：真
$ b tooltip {
formatter：function（）{
var s;
if（this.point.name）{//饼图
s =''+ this.point.name +'：'+ this.y;
} else {
s =''+ this.x +'：'+ this.y;
}
return s;
}
}，
标签：{
items：[{
html：''，
style：{
left：'40px '，
top：'8px'，
color：'black'
}
}]
}，
series：[{
请输入：'column'，
name：'Black'，
data：[136,123,147,133]
}，{
type：'column'，
name：'BW Print'，
data：[213,187,226,200]
}，{
类型：'列'，
名称：'Fashion' ，
data：[213,187,226,200]
}，
{
类型：'样条线'，
名称：'利润％ '，
yAxis：1，
数据：[20,30,40]，
/ *黑色，BW印花和时尚
的利润％对于北方， - > 20，30，40％
对于东 - > 35，45，55％
西部 - > 45，35，50％
四南 - > 33,42,55％
* /
颜色：'＃CD0000'，
标记：{
lineWidth：1，
lineColor：'＃CD0000'，
fillColor：'＃CD0000'
}
}
]
}）;
}）;
<3>：
1）您可以通过为样条线系列添加第二个x轴，为每个列添加一个类别以及在列系列中使用groupPadding例如：
http://jsfiddle.net/jlbriggs/3SjWT/11 /
$ b 2）使用双y轴图表来分析两种完全不同的方法，他们不好主意。这是一个非常常见的错误，但仍然是一个错误。
通过叠加不同比例的数据，这样设置图表，迫使观众进行不真实的比较，从而显示实际上不存在的数据集之间的交互。 （即，利润似乎低于北方黑人品类的销售额，并超过东方时装品牌的销售额，这当然不是真实的，但观众留下的是印象潜意识地）。
3）或许更重要的是，利润数据不应该用折线图显示。折线图用于显示随时间变化的模式。再次使用一条线连接离散分类数据会给人一种错误的印象 - 该线的模式对数据有意义。 显示这些数据的更好方法是使用两个柱形图，一个在另一个之上。 许多人经常害怕使用多个图表，感觉不知何故单个图表是理想的，但实际上多个图表往往是更好的选择。
但它根本不是一个有意义的模式，因为它只连接离散的分类数据点，可以任意重新排序。
一个图表显示销售数据，另一个显示利润数据。
）
FWIW。
Is there a way to combine Splines with Grouped Columns in HighCharts?
Here is what I have.
- 4 Categories on X- Axis
- Each category has 3 columns
- In effect, I will have 4 groups with each group showing 3 columns each
- Now, on secondary Y-Axis, I want to draw a Spline that cuts across all 3 columns across all Four groups.
Moreover, I would like the Spline point to be centered on each on respective column..
Is this even possible?
Thanks in Advance!
Code:
$(function () {
$('#container').highcharts({
chart: {},
title: {
text: 'Combination chart'
},
xAxis: {
categories: ['North', 'East', 'West', 'South'],
gridLineWidth: 0
},
yAxis: [{ // Primary yAxis
gridLineWidth: 0,
labels: {
style: {
color: '#89A54E'
}
},
title: {
text: 'Sales',
style: {
color: '#89A54E'
}
}
}, { // Secondary yAxis
title: {
text: 'Profit %',
style: {
color: Highcharts.getOptions().colors[3]
}
},
labels: {
style: {
color: '#4572A7'
}
},
opposite: true
}],
tooltip: {
formatter: function () {
var s;
if (this.point.name) { // the pie chart
s = '' + this.point.name + ': ' + this.y;
} else {
s = '' + this.x + ': ' + this.y;
}
return s;
}
},
labels: {
items: [{
html: '',
style: {
left: '40px',
top: '8px',
color: 'black'
}
}]
},
series: [{
type: 'column',
name: 'Black',
data: [136, 123, 147, 133]
}, {
type: 'column',
name: 'BW Print',
data: [213, 187, 226, 200]
}, {
type: 'column',
name: 'Fashion',
data: [213, 187, 226, 200]
},
{
type: 'spline',
name: 'Profit %',
yAxis: 1,
data: [20, 30, 40],
/* Profit % for Black, BW Print and Fashion
For North, -> 20, 30, 40 %
For East -> 35, 45, 55%
For West -> 45, 35, 50%
Four South -> 33, 42, 55%
*/
color: '#CD0000',
marker: {
lineWidth: 1,
lineColor: '#CD0000',
fillColor: '#CD0000'
}
}
]
});
});
3 things:
1) You can get something like this by adding a second x axis for the spline series, adding a category for each column, and playing with your groupPadding on the column series in order to get things aligned properly
example:
http://jsfiddle.net/jlbriggs/3SjWT/11/
2) using a dual y axis chart for two completely different measures like this is a really bad idea. It is a very common mistake, but a mistake nonetheless.
Setting the chart up this way forces the viewer to make comparisons that are not real, by overlaying data of different scales, and thereby displaying interactions between the data sets that don't actually exist. (ie, the profits appear to be "less than" the sales for the black category in the North, and exceed sales in the East for the Fashion cetegory. this is, of course, not anything real, but the viewer is left with that impression subconsciously).
3) perhaps more importantly, the profit data should not be displayed with a line chart at all. A line chart is used to show a pattern of change over time. Using a line to connect discrete categorical data again gives a false impression - that the pattern of the line is meaningful to the data.
But it's not a meaningful pattern at all, as it is only connecting discrete categorical data points, which can be arbitrarily re-ordered.
The better way to display this data would be with two column charts, one above the other. One chart showing sales data, the other showing profit data.
Many people are often afraid to use multiple charts, feeling that somehow a single chart is the ideal, but in reality multiple charts are very often the better option.
(example: http://jsfiddle.net/jlbriggs/3SjWT/16/ )
FWIW.
这篇关于带分组列的样条线高度图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
