Highchart timeseries组数据每日/每周工具提示格式化程序

时间:2017-09-22 07:30:37

标签: javascript angularjs highcharts

我正在使用Highstocks默认打开数据分组。

处理“point - > events - > mouseOver”事件时, 我想找到悬停点的确切x-y位置。

我现在正在做的是:

// When data is grouped as daily/weekly
tooltip: {
        useHTML: true,
        hideDelay: 0,
        snap: 0,
        backgroundColor: 'rgba(255,255,255,1)',
        formatter: function() {
          let item;
          // When zoomed out and data is grouped or graph grouped by day or week
          if(this.series.hasGroupedData) {
            // let xPos = this.series.xData[Math.round(this.point.clientX)];
            // let yPos = this.series.yData[Math.round(this.point.plotY)];
            // find the timestamp in the middle of the timestamp grouping
            let maxClientX = Math.round(this.series.groupedData[this.series.groupedData.length - 1].clientX);
            let point_position_percent = this.point.clientX / maxClientX;
            let point_position_index = Math.round(point_position_percent * this.series.xData.length);
            let xPos = this.series.xData[point_position_index];
            item = _.find(this.series.options.data, {x:xPos});
          }
          // When zoomed in
          else {
            item = this.point;
          }
          let tooltipFormat = this.key+'<table><tr><td><span style="color:{series.color}">\u25CF</span></td><td>'+this.series.name+': </td>' + '<td><b>'+this.y+'</b></td></tr>' +
            '<tr><td></td><td>Data 1: </td>' + '<td><b>'+item.data1+'</b></td></tr>' +
            '<tr><td></td><td>Data 2: </td>' + '<td><b>'+item.data2+'</b></td></tr>' +
            '<tr><td></td><td>Data 3: </td>' + '<td><b>'+item.data3+'</b></td></tr></table>';
          return tooltipFormat;
        }
      }

只需在X轴上找到点的“百分比”,然后将此百分比转换为数据集中的等效索引即可。

0 个答案:

没有答案