javascript - 如何使用 Highcharts 在两个 x 轴上显示当前值？

Question

我正在尝试为我的一次训练绘制图表，并希望将心率显示为 y 轴，将时间和距离显示为两个 x 轴。

我可以为时间和距离创建轴，但我不确定如何填充数据。现在我要添加距离和时间的心率数据，这似乎会搞砸演示，因为数据点加倍了。

保持两个 x 轴相互独立并且仅将时间、距离和心率数据添加一次的最佳方法是什么？

我希望工具提示显示如下内容:

Time: 00:19:59
Distance: 5607.2 m
Heart Rate: 190

演示:http://jsfiddle.net/remisture/4js1nx8z/

$(function() {
  $(document).ready(function() {
    Highcharts.setOptions({
      global: {
        useUTC: false
      }
    });

    $.getJSON('http://www.json-generator.com/api/json/get/bTSFRnarqW?indent=2&callback=?', function(jsonData) {

      $('#container').highcharts({
        chart: {
          type: 'area',
          marginRight: 10
        },
        title: {
          text: '20:00, 5611 m'
        },
        xAxis: [{
          title: {
            text: 'Time'
          },
          type: 'datetime',
          tickPixelInterval: 50
        }, {
          title: {
            text: 'Distance'
          },
          opposite: true
        }],
        yAxis: {
          title: {
            text: 'Heart rate'
          }
        },
        tooltip: {
          formatter: function() {
            var s = [];
            s.push("<b>Time:</b> " + Highcharts.dateFormat('%H:%M:%S', this.points[0].x));
            $.each(this.points, function(i, point) {

              s.push('<b>' + point.series.name + '</b>: ' + point.y);

            });

            return s.join('<br/>');
          },
          shared: true
        },
        legend: {
          enabled: false
        },
        exporting: {
          enabled: false
        },
        series: [{
          xAxis: 0,
          name: 'BPM',
          data: (function() {
            var data = [],
              time,
              i;

            for (i = 0; i < jsonData.length; i++) {
              time = new Date(1970, 0, 1);
              time.setSeconds(jsonData[i]['Time (seconds)']);
              data.push({
                x: time,
                y: jsonData[i]['Heart Rate']
              });
            }

            return data;
          })()
        }, {
          xAxis: 1,
          name: 'BPM',
          data: (function() {
            var data = [];

            for (i = 0; i < jsonData.length; i++) {
              data.push({
                x: jsonData[i]['Distance (meters)'],
                y: jsonData[i]['Heart Rate']
              });
            }

            return data;
          })()
        }]
      });
    });
  });

});

谢谢。

Answer 1

好的，在重新阅读和查看数据后，我想我明白了你想要的。

时间和距离之间的关系似乎足够强，对于您的目的而言，这不是问题，但请注意，绘制的值可能并不总是与轴值完全匹配。

我会这样做

1)提前获取最大距离值(我在示例中作弊，查看数据后将其硬编码)，并将其设置为距离 xAxis max值

2) 在 x 轴上设置一个虚拟系列，使其正确显示，并使用空数据数组

3) 将距离设置为主要数据系列中的第三个参数，并以这种方式在工具提示中调用它

所以，对于轴:

xAxis: [{
    title: {
      text: 'Seconds'
    },
  }, {
    opposite: true,
    min: 0,
    max: 5607, <-- get this from the data ahead of time
    title: {
      text: 'Distance'
    },
  }]

然后是系列:

series: [{
    name: 'BPM',
    data: (function() {
      var data = [];
      for (i = 0; i < jsonData.length; i++) {
        data.push({
          x: jsonData[i]['Time (seconds)'],
          y: jsonData[i]['Heart Rate'],
                        'Distance': jsonData[i]['Distance (meters)']
        });
      }
      return data;
    })()
  }, {
    xAxis: 1,
    data: []
  }]

然后是工具提示:

tooltip: {
    crosshairs: true,
    formatter: function() {
        return  '<b>Time: </b>'+ this.point.x
                +'<br/><b>BPM: </b>'+ this.point.y
                +'<br/><b>Distance: </b>'+ this.point.Distance;
    }
  }      

fiddle :

• http://jsfiddle.net/jlbriggs/nzkabqqa/

输出: