我试图创建一个类似于以下内容的图表,但不确定如何配置参数,而对数据结构感到困惑
注释: 每列应独立。它们彼此之间不共享任何数据/系列。列中的数据应包含在其自己的列中。
本质上,我希望在y轴上有五个不同的序列,每个序列将堆叠其数据,而不将数据传递到其他轴。
即:“资产类别”具有股票,ETFS,现金的数据,并且该数据应仅在“资产类别”列中。同样,行业将具有部门级别等数据。
当前,我的输出类似于标准的堆叠条形图
这是我当前的数据结构,我敢肯定需要大修改:
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)}
]
我的图表代码(如果需要):
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
}
我们还讨论了是否可能有一个类别列表,并且仅根据我们选择的列使用这些类别的一部分。任何帮助将不胜感激:)
答案 0 :(得分:1)
相对于说明,您的系列结构应如下所示:
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}
]
}]
要使悬停系列看起来“活跃”,可以对事件update
和mouseOver
中的序列点使用mouseOut
方法:
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
);
}
}
}
}
});
实时演示:http://jsfiddle.net/BlackLabel/Ljfqe0ts/
API参考:https://api.highcharts.com/highcharts/series.column.events