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;
    }
  }

<强>小提琴：

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

输出

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

1 个答案: