[英]HighCharts Data Structure - Multiple Independent Series, Stacked Column Chart
I'm trying to create a highchart that resembles the following but am not sure how to configure my parameters and rather confused about the data structure 我正在尝试创建类似于以下内容的图表,但不确定如何配置参数,而对数据结构感到困惑
Notes: Each column should be independent.
注意:每列应独立。 They do not share any data/series amongst each other.
它们彼此之间不共享任何数据/系列。 Data within a column should be contained within its own column.
列中的数据应包含在其自己的列中。
Essentially, I want to have five different series on the y-axis, where each series will stack its data and not pass that data into the other axises. 本质上,我想在y轴上有五个不同的序列,每个序列将堆叠其数据,而不是将数据传递到其他轴。
ie: Asset Class has data for Stocks, ETFS, Cash and that data should only be in the Asset Class column. 即:“资产类别”具有股票,ETFS,现金的数据,并且该数据应仅在“资产类别”列中。 Similarly, Industry will have data for Sector Level and etc.
同样,行业将具有部门级别等数据。
Currently, my output resembles the standard stacked-bar-chart layout 目前,我的输出类似于标准的堆叠条形图布局
Here is my current data structure, which I am sure will need a big revision: 这是我当前的数据结构,我敢肯定需要进行大的修改:
categories: ["", "Utilities", "Energy", "Funds", "Financial", "Consumer, Cyclical", "Consumer, Non-cyclical", "Communications", "Basic Materials", "Industrial", "Technology", "Other", "Government"]
series: [
{name: "Cash", data: Array(13)},
{name: "Equity", data: Array(13)},
{name: "Fixed Income", data: Array(13)},
{name: "Fund", data: Array(13)}
]
My chart code if needed: 我的图表代码(如果需要):
this.options = {
chart: {
type: 'column',
height: 500,
style: {
fontFamily: "Arial"
}
},
title: {
text: ""
},
xAxis: {
categories: categories,
labels: {
style: {
fontSize: "14px"
}
}
},
yAxis: {
min: 0,
title: {
text: ""
},
labels: {
formatter: function () {
let valueString = (
this.value > 999.99 && this.value <= 999999.99 ?
"$" + (this.value / 1000).toFixed(0) + "K" : this.value > 999999.99 ?
"$" + (this.value / 1000000).toFixed(1) + "M" : this.value
)
return valueString
},
style: {
fontSize: "14px",
}
}
},
legend: {
align: 'right',
verticalAlign: 'top',
layout: "vertical",
x: 0,
y: 50,
itemStyle: {
fontSize: "16px",
color: "#6c6c6c",
},
symbolPadding: 8,
itemMarginTop: 10,
shadow: false,
labelFormatter: function () {
return `${this.name}`
}
},
tooltip: {
formatter: function () {
let name = this.series.name
let value = this.y
let valueString = `$${value.toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}`
let total = this.point.stackTotal
let percentage = ((value / total) * 100).toFixed(2)
let percentageString = `(${percentage})%`
return `<b>${name}</b> <br> ${valueString} ${percentageString}`
},
style: {
fontSize: "14px",
},
backgroundColor: "#ffffff"
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: false
}
},
series: {
borderColor: "rgba(0, 0, 0, 0)"
}
},
series: series
}
We also discussed whether it would be possible to have a list of categories, and only use a portion of those categories depending on the column we have selected. 我们还讨论了是否可能有一个类别列表,并且仅根据我们选择的列使用这些类别的一部分。 Any help will be greatly appreciated :)
任何帮助将不胜感激 :)
Relative to the description, your series structure should look this way: 相对于描述,您的系列结构应如下所示:
series = [{
name: "Cash",
data: [
{x: 0, y: 5},
{x: 0, y: 2},
{x: 0, y: 4}
]
}, {
name: "Equity",
data: [
{x: 1, y: 4},
{x: 1, y: 3},
{x: 1, y: 4}
]
}, {
name: "Fixed Income",
data: [
{x: 2, y: 4},
{x: 2, y: 5},
{x: 2, y: 2}
]
}]
To make the hover series look 'active', you can use update
method for the series points in mouseOver
and mouseOut
events: 为了使悬停系列看起来“活跃”,可以对
mouseOver
和mouseOut
事件中的系列点使用update
方法:
var categories = ["Utilities", "Energy", "Funds"],
colors = ['red', 'green', 'blue'],
series = [...],
i = 0,
newCategories,
chartCategories = [];
for (; i < series.length; i++) {
chartCategories.push('');
}
Highcharts.chart('container', {
...,
plotOptions: {
column: {
...,
events: {
mouseOver: function() {
this.points.forEach(function(p, i) {
p.update({
color: colors[i]
});
}, this);
newCategories = chartCategories.slice();
newCategories.splice(
this.index, 1, categories[this.index]
);
this.xAxis.setCategories(
newCategories
);
},
mouseOut: function() {
this.points.forEach(function(p) {
p.update({
color: ''
});
}, this);
this.xAxis.setCategories(
chartCategories
);
}
}
}
}
});
Live demo: http://jsfiddle.net/BlackLabel/Ljfqe0ts/ 现场演示: http : //jsfiddle.net/BlackLabel/Ljfqe0ts/
API Reference: https://api.highcharts.com/highcharts/series.column.events API参考: https : //api.highcharts.com/highcharts/series.column.events
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.