javascript - 增加 Sankey Highcharts 数据系列栏的高度
问题描述
使用 highcharts 的 Sankey 图表,我需要知道是否可以增加与每个数据关联的条形高度,并且还需要在工具提示中显示新行中每个系列数据的附加信息。
我尝试使用 css 来增加条形的高度,但没有成功
https://jsfiddle.net/samwhite/9a5qymvs/
Highcharts.setOptions({
colors: ['#538FB3', '#F6F6BC', '#96CAC1', '#C1BED6', '#EA8E83', '#8AAFC9', '#EAB375', '#AFCF78', '#F6D3E5', '#2f6f81', '#D9D9D9', '#3D6D52'],
})
Highcharts.chart('container', {
chart: { //height: 600,
//width: 2000,
},
title: {
text: 'Sankey',
align: 'left',
style: {
color: '#2B2B2B',
fontSize: '20px',
fontWeight: 'bold',
}
},
credits: {
enabled: false
},
accessibility: {
point: {
valueDescriptionFormat: '{index}. {point.from} to {point.to}, {point.weight}.'
}
},
tooltip: {
formatter: function() {
let weight = this.point.weight,
from = this.point.from,
to = this.point.to,
displayedWeight;
weight === 1 ? displayedWeight = 0 : displayedWeight = weight;
return 'From <b>' + from +
'</b> to <b>' + to + '</b> weight is ' + displayedWeight;
}
},
series: [{
keys: ['from', 'to', 'weight'],
data: [
[' Accelerated Filer 2017', ' Non-accelerated Filer 2018', 79],
[' Accelerated Filer 2017', ' Smaller Reporting Accelerated Filer 2018', 23],
[' Accelerated Filer 2017', ' Smaller Reporting Company 2018', 34],
[' Large Accelerated Filer 2017', ' Accelerated Filer 2018', 61],
[' Large Accelerated Filer 2017', ' Non-accelerated Filer 2018', 14],
[' Non-accelerated Filer 2017', ' Accelerated Filer 2018', 222],
[' Non-accelerated Filer 2017', ' Large Accelerated Filer 2018', 65],
[' Non-accelerated Filer 2017', ' Smaller Reporting Accelerated Filer 2018', 1],
[' Non-accelerated Filer 2017', ' Smaller Reporting Company 2018', 45],
[' Smaller Reporting Accelerated Filer 2017', ' Accelerated Filer 2018', 20],
[' Smaller Reporting Accelerated Filer 2017', ' Non-accelerated Filer 2018', 5],
[' Smaller Reporting Accelerated Filer 2017', ' Smaller Reporting Company 2018', 3],
[' Smaller Reporting Company 2017', ' Accelerated Filer 2018', 61],
[' Smaller Reporting Company 2017', ' Large Accelerated Filer 2018', 1],
[' Smaller Reporting Company 2017', ' Non-accelerated Filer 2018', 2039],
[' Smaller Reporting Company 2017', ' Smaller Reporting Accelerated Filer 2018', 6],
[' Smaller Reporting Company 2017', ' Status Indeterminate 2018', 1],
[' Status Indeterminate 2017', ' Non-accelerated Filer 2018', 1],
[' Accelerated Filer 2018', ' Large Accelerated Filer 2019', 87],
[' Accelerated Filer 2018', ' Non-accelerated Filer 2019', 130],
[' Accelerated Filer 2018', ' Smaller Reporting Accelerated Filer 2019', 5],
[' Accelerated Filer 2018', ' Smaller Reporting Company 2019', 6],
[' Large Accelerated Filer 2018', ' Accelerated Filer 2019', 86],
[' Large Accelerated Filer 2018', ' Non-accelerated Filer 2019', 12],
[' Non-accelerated Filer 2018', ' Accelerated Filer 2019', 230],
[' Non-accelerated Filer 2018', ' Large Accelerated Filer 2019', 72],
[' Non-accelerated Filer 2018', ' Smaller Reporting Company 2019', 19],
[' Smaller Reporting Accelerated Filer 2018', ' Accelerated Filer 2019', 18],
[' Smaller Reporting Accelerated Filer 2018', ' Smaller Reporting Company 2019', 1],
[' Smaller Reporting Company 2018', ' Accelerated Filer 2019', 10],
[' Smaller Reporting Company 2018', ' Non-accelerated Filer 2019', 150],
[' Smaller Reporting Company 2018', ' Smaller Reporting Accelerated Filer 2019', 2],
[' Smaller Reporting Company 2018', ' Status Indeterminate 2019', 1],
[' Status Indeterminate 2018', ' Large Accelerated Filer 2019', 1],
[' Status Indeterminate 2018', ' Non-accelerated Filer 2019', 5],
[' Status Indeterminate 2018', ' Smaller Reporting Company 2019', 1],
[' Accelerated Filer 2019', ' Large Accelerated Filer 2020', 84],
[' Accelerated Filer 2019', ' Non-accelerated Filer 2020', 530],
[' Accelerated Filer 2019', ' Status Indeterminate 2020', 8],
[' Large Accelerated Filer 2019', ' Accelerated Filer 2020', 167],
[' Large Accelerated Filer 2019', ' Non-accelerated Filer 2020', 16],
[' Large Accelerated Filer 2019', ' Status Indeterminate 2020', 4],
[' Non-accelerated Filer 2019', ' Accelerated Filer 2020', 99],
[' Non-accelerated Filer 2019', ' Large Accelerated Filer 2020', 64],
[' Non-accelerated Filer 2019', ' Smaller Reporting Company 2020', 1],
[' Non-accelerated Filer 2019', ' Status Indeterminate 2020', 2],
[' Smaller Reporting Accelerated Filer 2019', ' Smaller Reporting Company 2020', 1],
[' Smaller Reporting Company 2019', ' Accelerated Filer 2020', 1],
[' Smaller Reporting Company 2019', ' Non-accelerated Filer 2020', 33],
[' Smaller Reporting Company 2019', ' Status Indeterminate 2020', 2],
[' Status Indeterminate 2019', ' Large Accelerated Filer 2020', 2],
[' Status Indeterminate 2019', ' Non-accelerated Filer 2020', 1],
[' Accelerated Filer 2020', ' Large Accelerated Filer 2021', 17],
[' Accelerated Filer 2020', ' Non-accelerated Filer 2021', 29],
[' Large Accelerated Filer 2020', ' Accelerated Filer 2021', 16],
[' Non-accelerated Filer 2020', ' Accelerated Filer 2021', 15],
[' Non-accelerated Filer 2020', ' Large Accelerated Filer 2021', 12],
[' Smaller Reporting Company 2020', ' Non-accelerated Filer 2021', 7],
[' Status Indeterminate 2020', ' Accelerated Filer 2021', 1],
[' Status Indeterminate 2020', ' Non-accelerated Filer 2021', 1]
],
type: 'sankey',
dataLabels: {
format: '<span style="font-weight: normal; font-size: 16px">' +
'{point.fromNode.name} \u2192 {point.toNode.name}: {point.weight}' +
'</span>',
nodeFormat: '{point.name}'
},
name: 'Sankey demo series'
}]
});
解决方案
推荐阅读
- pyspark - 左连接导致火花中的交叉连接
- html - 是否可以对数据 URI 使用通用 MIME 类型?
- python - 如何抓取动态更新的表
- android - 无法使用 CoordinatorLayout 将 LinearLayout 锚定到父级的底部
- wordpress - 上传新网站后,页面仍然显示
- python - pygame 退出按钮无法正常工作
- java - Gradle 5.1 上的依赖关系解析失败
- python - 想要创建新对象,而不是项目重复项
- c - typedef 语法说明
- asp.net-mvc - 传入字典的模型项的类型为“System.Security.Principal.WindowsPrincipal”,但需要模型“Namepace.Models.User”