我有一系列的自定义数据,并且仅当用户将鼠标悬停在某个点上时显示。
如何使用highcharts csv导出选项导出它们?
Highcharts.setOptions({
colors: ['lightgrey', 'black', 'red', '#ff7676']
});
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Stock Report<br><b>Total Used:</b> 380'
},
subtitle: {
text: '31 December 2018 - 29 January 2019'
},
xAxis: {
categories: [
'31 December', '01 January', '02 January', '03 January', '04 January', '05 January', '06 January', '07 January', '08 January', '09 January', '10 January', '11 January', '12 January', '13 January', '14 January', '15 January', '16 January', '17 January', '18 January', '19 January', '20 January', '21 January', '22 January', '23 January', '24 January', '25 January', '26 January', '27 January', '28 January', '29 January',
],
//crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'No. of used stock'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
}
}
},
tooltip: {
// shared: true,
formatter: function() {
var h = this.x + '<br><b>' + this.series.name + '</b>';
if (this.point.KidS)
h += '<br>Kid-S: ' + this.point.KidS;
if (this.point.KidM)
h += '<br>Kid-M: ' + this.point.KidM;
if (this.point.KidL)
h += '<br>Kid-L: ' + this.point.KidL;
if (this.point.XS)
h += '<br>XS: ' + this.point.XS;
if (this.point.S)
h += '<br>S: ' + this.point.S;
if (this.point.M)
h += '<br>XS: ' + this.point.M;
if (this.point.L)
h += '<br>L: ' + this.point.L;
if (this.point.XL)
h += '<br>XL: ' + this.point.XL;
h += '<br><br><b>Total:</b> ' + this.y;
return h;
}
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
}
}
},
series: [{
name: 'White',
data: [{
y: 8,
'KidL': 0,
'KidM': 0,
'KidS': 0,
'L': 1,
'M': 1,
'S': 3,
'XL': 2,
'XS': 1,
}, {
y: 11,
'KidL': 2,
'KidM': 0,
'KidS': 0,
'L': 1,
'M': 5,
'S': 1,
'XL': 0,
'XS': 2,
}, {
y: 6,
'KidL': 0,
'KidM': 0,
'KidS': 0,
'L': 3,
'M': 0,
'S': 1,
'XL': 1,
'XS': 1,
}, {
y: 4,
'KidL': 2,
'KidM': 0,
'KidS': 0,
'L': 0,
'M': 1,
'S': 1,
'XL': 0,
'XS': 0,
}, {
y: 6,
'KidL': 0,
'KidM': 0,
'KidS': 0,
'L': 1,
'M': 2,
'S': 2,
'XL': 0,
'XS': 1,
}, {
y: 11,
'KidL': 1,
'KidM': 0,
'KidS': 0,
'L': 1,
'M': 4,
'S': 2,
'XL': 2,
'XS': 1,
}, {
y: 18,
'KidL': 1,
'KidM': 1,
'KidS': 0,
'L': 2,
'M': 3,
'S': 4,
'XL': 0,
'XS': 6,
}, {
y: 2,
'KidL': 0,
'KidM': 0,
'KidS': 0,
'L': 0,
'M': 0,
'S': 1,
'XL': 0,
'XS': 1,
}, {
y: 7,
'KidL': 2,
'KidM': 0,
'KidS': 0,
'L': 0,
'M': 3,
'S': 1,
'XL': 0,
'XS': 1,
}, {
y: 6,
'KidL': 2,
'KidM': 1,
'KidS': 0,
'L': 2,
'M': 0,
'S': 1,
'XL': 0,
'XS': 0,
}, {
y: 1,
'KidL': 0,
'KidM': 0,
'KidS': 0,
'L': 0,
'M': 0,
'S': 1,
'XL': 0,
'XS': 0,
}, {
y: 4,
'KidL': 0,
'KidM': 0,
'KidS': 0,
'L': 1,
'M': 2,
'S': 1,
'XL': 0,
'XS': 0,
}, {
y: 1,
'KidL': 0,
'KidM': 0,
'KidS': 0,
'L': 0,
'M': 1,
'S': 0,
'XL': 0,
'XS': 0,
}, {
y: 9,
'KidL': 1,
'KidM': 0,
'KidS': 2,
'L': 0,
'M': 1,
'S': 0,
'XL': 0,
'XS': 5,
}, {
y: 9,
'KidL': 0,
'KidM': 5,
'KidS': 1,
'L': 0,
'M': 1,
'S': 1,
'XL': 0,
'XS': 1,
}, {
y: 1,
'KidL': 0,
'KidM': 0,
'KidS': 0,
'L': 0,
'M': 1,
'S': 0,
'XL': 0,
'XS': 0,
}, {
y: 1,
'KidL': 0,
'KidM': 0,
'KidS': 0,
'L': 0,
'M': 1,
'S': 0,
'XL': 0,
'XS': 0,
}, {
y: 5,
'KidL': 0,
'KidM': 0,
'KidS': 0,
'L': 0,
'M': 2,
'S': 3,
'XL': 0,
'XS': 0,
}, {
y: 3,
'KidL': 0,
'KidM': 0,
'KidS': 0,
'L': 0,
'M': 1,
'S': 1,
'XL': 0,
'XS': 1,
}, {
y: 8,
'KidL': 0,
'KidM': 0,
'KidS': 0,
'L': 1,
'M': 2,
'S': 4,
'XL': 0,
'XS': 1,
}, {
y: 19,
'KidL': 2,
'KidM': 3,
'KidS': 0,
'L': 2,
'M': 5,
'S': 5,
'XL': 0,
'XS': 2,
}, {
y: 14,
'KidL': 3,
'KidM': 0,
'KidS': 1,
'L': 1,
'M': 3,
'S': 4,
'XL': 0,
'XS': 2,
}, {
y: 1,
'KidL': 0,
'KidM': 0,
'KidS': 0,
'L': 1,
'M': 0,
'S': 0,
'XL': 0,
'XS': 0,
}, {
y: 12,
'KidL': 1,
'KidM': 2,
'KidS': 0,
'L': 1,
'M': 2,
'S': 3,
'XL': 0,
'XS': 3,
}, {
y: 1,
'KidL': 0,
'KidM': 0,
'KidS': 0,
'L': 0,
'M': 1,
'S': 0,
'XL': 0,
'XS': 0,
}, {
y: 2,
'KidL': 0,
'KidM': 0,
'KidS': 0,
'L': 0,
'M': 0,
'S': 0,
'XL': 0,
'XS': 2,
}, {
y: 5,
'KidL': 0,
'KidM': 0,
'KidS': 0,
'L': 1,
'M': 1,
'S': 1,
'XL': 0,
'XS': 2,
}, {
y: 1,
'KidL': 0,
'KidM': 0,
'KidS': 0,
'L': 1,
'M': 0,
'S': 0,
'XL': 0,
'XS': 0,
}, {
y: 1,
'KidL': 0,
'KidM': 0,
'KidS': 0,
'L': 1,
'M': 0,
'S': 0,
'XL': 0,
'XS': 0,
}, ]
},
{
name: 'Black',
data: [{
y: 12,
'KidL': 0,
'KidM': 0,
'KidS': 0,
'L': 3,
'M': 1,
'S': 2,
'XL': 1,
'XS': 5,
}, {
y: 16,
'KidL': 0,
'KidM': 0,
'KidS': 0,
'L': 4,
'M': 3,
'S': 8,
'XL': 1,
'XS': 0,
}, {
y: 7,
'KidL': 0,
'KidM': 0,
'KidS': 0,
'L': 5,
'M': 1,
'S': 1,
'XL': 0,
'XS': 0,
}, {
y: 5,
'KidL': 0,
'KidM': 0,
'KidS': 0,
'L': 3,
'M': 0,
'S': 2,
'XL': 0,
'XS': 0,
}, {
y: 4,
'KidL': 0,
'KidM': 0,
'KidS': 0,
'L': 2,
'M': 0,
'S': 2,
'XL': 0,
'XS': 0,
}, {
y: 9,
'KidL': 0,
'KidM': 0,
'KidS': 0,
'L': 4,
'M': 0,
'S': 5,
'XL': 0,
'XS': 0,
}, {
y: 8,
'KidL': 0,
'KidM': 0,
'KidS': 0,
'L': 0,
'M': 2,
'S': 6,
'XL': 0,
'XS': 0,
}, {
y: 4,
'KidL': 0,
'KidM': 0,
'KidS': 0,
'L': 0,
'M': 1,
'S': 3,
'XL': 0,
'XS': 0,
}, {
y: 14,
'KidL': 0,
'KidM': 0,
'KidS': 0,
'L': 11,
'M': 0,
'S': 3,
'XL': 0,
'XS': 0,
}, {
y: 2,
'KidL': 0,
'KidM': 0,
'KidS': 0,
'L': 1,
'M': 0,
'S': 1,
'XL': 0,
'XS': 0,
}, {
y: 1,
'KidL': 0,
'KidM': 0,
'KidS': 0,
'L': 1,
'M': 0,
'S': 0,
'XL': 0,
'XS': 0,
}, {
y: 8,
'KidL': 0,
'KidM': 0,
'KidS': 0,
'L': 2,
'M': 0,
'S': 6,
'XL': 0,
'XS': 0,
}, {
y: 3,
'KidL': 0,
'KidM': 0,
'KidS': 0,
'L': 0,
'M': 0,
'S': 2,
'XL': 0,
'XS': 1,
}, {
y: 16,
'KidL': 2,
'KidM': 1,
'KidS': 1,
'L': 3,
'M': 1,
'S': 6,
'XL': 0,
'XS': 2,
}, {
y: 6,
'KidL': 1,
'KidM': 0,
'KidS': 1,
'L': 2,
'M': 0,
'S': 2,
'XL': 0,
'XS': 0,
}, {
y: 1,
'KidL': 0,
'KidM': 0,
'KidS': 0,
'L': 0,
'M': 0,
'S': 1,
'XL': 0,
'XS': 0,
}, {
y: 2,
'KidL': 0,
'KidM': 0,
'KidS': 0,
'L': 1,
'M': 0,
'S': 1,
'XL': 0,
'XS': 0,
}, {
y: 2,
'KidL': 0,
'KidM': 0,
'KidS': 0,
'L': 0,
'M': 0,
'S': 2,
'XL': 0,
'XS': 0,
}, {
y: 12,
'KidL': 0,
'KidM': 0,
'KidS': 2,
'L': 3,
'M': 0,
'S': 7,
'XL': 0,
'XS': 0,
}, {
y: 6,
'KidL': 0,
'KidM': 1,
'KidS': 0,
'L': 3,
'M': 0,
'S': 2,
'XL': 0,
'XS': 0,
}, {
y: 2,
'KidL': 0,
'KidM': 0,
'KidS': 0,
'L': 0,
'M': 0,
'S': 2,
'XL': 0,
'XS': 0,
}, {
y: 5,
'KidL': 0,
'KidM': 0,
'KidS': 0,
'L': 1,
'M': 1,
'S': 3,
'XL': 0,
'XS': 0,
}, {
y: 4,
'KidL': 1,
'KidM': 0,
'KidS': 0,
'L': 1,
'M': 0,
'S': 2,
'XL': 0,
'XS': 0,
}, {
y: 3,
'KidL': 0,
'KidM': 0,
'KidS': 0,
'L': 2,
'M': 0,
'S': 1,
'XL': 0,
'XS': 0,
}, {
y: 1,
'KidL': 0,
'KidM': 0,
'KidS': 0,
'L': 0,
'M': 0,
'S': 0,
'XL': 1,
'XS': 0,
}, {
y: 18,
'KidL': 1,
'KidM': 2,
'KidS': 0,
'L': 8,
'M': 0,
'S': 6,
'XL': 0,
'XS': 0,
}, {
y: 2,
'KidL': 0,
'KidM': 0,
'KidS': 0,
'L': 1,
'M': 0,
'S': 1,
'XL': 0,
'XS': 0,
}, ]
},
{
name: 'Red',
data: [{
y: 2,
'KidL': 0,
'KidM': 1,
'KidS': 0,
'L': 0,
'M': 0,
'S': 0,
'XL': 1,
'XS': 0,
}, {
y: 3,
'KidL': 0,
'KidM': 3,
'KidS': 0,
'L': 0,
'M': 0,
'S': 0,
'XL': 0,
'XS': 0,
}, {
y: 1,
'KidL': 0,
'KidM': 0,
'KidS': 1,
'L': 0,
'M': 0,
'S': 0,
'XL': 0,
'XS': 0,
}, {
y: 1,
'KidL': 0,
'KidM': 1,
'KidS': 0,
'L': 0,
'M': 0,
'S': 0,
'XL': 0,
'XS': 0,
}, {
y: 5,
'KidL': 2,
'KidM': 2,
'KidS': 1,
'L': 0,
'M': 0,
'S': 0,
'XL': 0,
'XS': 0,
}, {
y: 4,
'KidL': 1,
'KidM': 3,
'KidS': 0,
'L': 0,
'M': 0,
'S': 0,
'XL': 0,
'XS': 0,
}, {
y: 1,
'KidL': 0,
'KidM': 1,
'KidS': 0,
'L': 0,
'M': 0,
'S': 0,
'XL': 0,
'XS': 0,
}, {
y: 1,
'KidL': 1,
'KidM': 0,
'KidS': 0,
'L': 0,
'M': 0,
'S': 0,
'XL': 0,
'XS': 0,
}, {
y: 5,
'KidL': 4,
'KidM': 0,
'KidS': 0,
'L': 0,
'M': 0,
'S': 1,
'XL': 0,
'XS': 0,
}, {
y: 6,
'KidL': 2,
'KidM': 1,
'KidS': 3,
'L': 0,
'M': 0,
'S': 0,
'XL': 0,
'XS': 0,
}, ]
},
],
exporting: {
enabled: true
},
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container"></div>
答案 0 :(得分:1)
您只需传递series.keys
(一个指定哪个选项映射到数据点数组中的哪个键)的数组即可。
在您的示例中,该数组如下所示:
plotOptions: {
series: {
keys: [
'y', 'KidL', 'KidM', 'KidS', 'L', 'M', 'S', 'XL', 'XS'
]
}
}
演示:
API参考: