如何识别 Highcharts 数据组事件?
How to identify Highcharts datagroup event?
我想在 Highcharts 对数据进行分组时触发消息。我想显示的消息是,这是组数据,而不是真实数据。
我找到了一些禁用分组的信息:
dataGrouping: {enabled:false}
但我想找到一个在数据自动分组时触发的事件,它可以触发消息。
我怎样才能做到这一点?
$.getJSON('https://cdn.rawgit.com/highcharts/highcharts/057b672172ccc6c08fe7dbb27fc17ebca3f5b770/samples/data/large-dataset.json', function(data) {
// Create a timer
var start = +new Date();
// Create the chart
Highcharts.stockChart('container', {
chart: {
events: {
load: function() {
if (!window.TestController) {
this.setTitle(null, {
text: 'Built chart in ' + (new Date() - start) + 'ms'
});
}
}
},
zoomType: 'x'
},
rangeSelector: {
buttons: [{
type: 'day',
count: 3,
text: '3d'
}, {
type: 'week',
count: 1,
text: '1w'
}, {
type: 'month',
count: 1,
text: '1m'
}, {
type: 'month',
count: 6,
text: '6m'
}, {
type: 'year',
count: 1,
text: '1y'
}, {
type: 'all',
text: 'All'
}],
selected: 3
},
yAxis: {
title: {
text: 'Temperature (°C)'
}
},
title: {
text: 'Hourly temperatures in Vik i Sogn, Norway, 2009-2017'
},
subtitle: {
text: 'Built chart in ...' // dummy text to reserve space for dynamic subtitle
},
series: [{
name: 'Temperature',
data: data.data,
pointStart: data.pointStart,
pointInterval: data.pointInterval,
tooltip: {
valueDecimals: 1,
valueSuffix: '°C'
}
}]
});
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<div id="container" style="height: 400px; min-width: 310px"></div>
可以通过在generatePoints
函数时检查hasGroupedData
标志的状态来完成。 hasGroupedData
和 genearatePoints
都属于一个 Series
对象。 Highcharts.wrap
函数使代码简单:
(function(H) {
H.wrap(H.Series.prototype, 'generatePoints', function(proceed) {
proceed.call(this);
console.log('Data grouping applied: ' + (this.hasGroupedData === true));
});
})(Highcharts);
现场演示: http://jsfiddle.net/BlackLabel/djvrew2h/
注释掉 forced: true
以检查未应用分组时功能如何工作。
关于包装的文档: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts
我想在 Highcharts 对数据进行分组时触发消息。我想显示的消息是,这是组数据,而不是真实数据。
我找到了一些禁用分组的信息:
dataGrouping: {enabled:false}
但我想找到一个在数据自动分组时触发的事件,它可以触发消息。
我怎样才能做到这一点?
$.getJSON('https://cdn.rawgit.com/highcharts/highcharts/057b672172ccc6c08fe7dbb27fc17ebca3f5b770/samples/data/large-dataset.json', function(data) {
// Create a timer
var start = +new Date();
// Create the chart
Highcharts.stockChart('container', {
chart: {
events: {
load: function() {
if (!window.TestController) {
this.setTitle(null, {
text: 'Built chart in ' + (new Date() - start) + 'ms'
});
}
}
},
zoomType: 'x'
},
rangeSelector: {
buttons: [{
type: 'day',
count: 3,
text: '3d'
}, {
type: 'week',
count: 1,
text: '1w'
}, {
type: 'month',
count: 1,
text: '1m'
}, {
type: 'month',
count: 6,
text: '6m'
}, {
type: 'year',
count: 1,
text: '1y'
}, {
type: 'all',
text: 'All'
}],
selected: 3
},
yAxis: {
title: {
text: 'Temperature (°C)'
}
},
title: {
text: 'Hourly temperatures in Vik i Sogn, Norway, 2009-2017'
},
subtitle: {
text: 'Built chart in ...' // dummy text to reserve space for dynamic subtitle
},
series: [{
name: 'Temperature',
data: data.data,
pointStart: data.pointStart,
pointInterval: data.pointInterval,
tooltip: {
valueDecimals: 1,
valueSuffix: '°C'
}
}]
});
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<div id="container" style="height: 400px; min-width: 310px"></div>
可以通过在generatePoints
函数时检查hasGroupedData
标志的状态来完成。 hasGroupedData
和 genearatePoints
都属于一个 Series
对象。 Highcharts.wrap
函数使代码简单:
(function(H) {
H.wrap(H.Series.prototype, 'generatePoints', function(proceed) {
proceed.call(this);
console.log('Data grouping applied: ' + (this.hasGroupedData === true));
});
})(Highcharts);
现场演示: http://jsfiddle.net/BlackLabel/djvrew2h/
注释掉 forced: true
以检查未应用分组时功能如何工作。
关于包装的文档: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts