我正在使用highcharts plugin,我在页面上有大约5个图表。每个图表都是一个单独的组件。我是个新手,所以我不知道如何为所有图表制作共享工具提示。我看到了带有jQuery的示例,容器上的事件和带有同步工具提示的所有函数。我试图在组件中插入这些函数,但它并没有真正起作用。怎么在ember中完成?
这是一个混音:
export default Ember.Mixin.create({
syncExtremes: function (e) {
let thisChart = this.chart;
if (e.trigger !== 'syncExtremes') {
Highcharts.each(Highcharts.charts, function (chart) {
if (chart !== thisChart) {
if (chart.xAxis[0].setExtremes) { // It is null while updating
chart.xAxis[0].setExtremes(e.min, e.max, undefined, false, { trigger: 'syncExtremes' });
}
}
});
}
},
sharedRooltips: function () {
Ember.$('#container').bind('mousemove touchmove touchstart', function (e) {
let chart, point, i, event;
for (i = 0; i < Highcharts.charts.length; i = i + 1) {
chart = Highcharts.charts[i];
event = chart.pointer.normalize(e.originalEvent); // Find coordinates within the chart
point = chart.series[0].searchPoint(event, true); // Get the hovered point
if (point) {
point.highlight(e);
}
}
});
Highcharts.Pointer.prototype.reset = function () {
return undefined;
};
Highcharts.Point.prototype.highlight = function (event) {
this.onMouseOver(); // Show the hover marker
this.series.chart.tooltip.refresh(this); // Show the tooltip
this.series.chart.xAxis[0].drawCrosshair(event, this); // Show the crosshair
};
},
在组件中:
....
this.sharedRooltips();
_syncExtremes= this.syncExtremes;
....
xAxis: {
type: 'datetime',
crosshair: true,
events: {
syncExtremes: _syncExtremes
}
},
....