javascript - 如何识别 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>
解决方案
可以通过检查功能hasGroupedData
时标志的状态来完成generatePoints
。两者都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
推荐阅读
- javascript - 更新状态并在点击时获取数据(使用状态挂钩)
- javascript - 使用 JavaScript 映射键值对
- c++ - pmr::vector 比 std::vector 慢
- java - JDK 1.5 中的代码构建,但运行时使用 1.8,是否存在性能问题?
- docker - 如何在容器内从一个域“重定向”到另一个域?
- python - Pandas 的 Airflow 并行任务
- javascript - Firebase Firestore endBefore() 处理数据末尾
- bash - 如何使用 sed 或任何其他方法仅替换 magento envfile 中的 dbpassword
- architecture - 构建应用程序的授权在哪里是必要的?
- python - Django - 模型在字符串 'MM/DD/YYYY' 中有日期,在这种情况下我如何 order_by(date)?