Question

我从两个数据集中创建了一个时间序列图。现在的问题是，我想使用其他一些数据并显示在工具提示中，但是我不确定该怎么做。我进行了一些搜索，我有点相信可以通过callbacks来实现，但不知道如何处理。现在，工具提示会同时显示x和y的值，我也想显示r的值。

var ctx = document.getElementById('myChart').getContext('2d');
var s1 = {
  label: 'source',
  borderColor: 'blue',
  data: [
    { x: '2020-05-11T04:58:37Z',  y: 25, r:3001},
    { x: '2020-05-11T04:59:17Z',  y: 27, r:3002},
    { x: '2020-05-11T04:59:57Z',  y: 21, r:3003},
    { x: '2020-05-11T05:00:37Z',  y: 21, r:3004},
    { x: '2020-05-11T05:01:17Z',  y: 21, r:3456},
    { x: '2020-05-11T05:01:57Z',  y: 0.04, r:3243}
  ]
};

var s2 = {
  label: 'target',
  borderColor: 'red',
  data: [
    { x: '2020-05-11T04:58:37Z',  y: 28, r:3234},
    { x: '2020-05-11T04:59:17Z',  y: 31, r:3232},
    { x: '2020-05-11T04:59:57Z',  y: 27, r:5332},
    { x: '2020-05-11T05:00:37Z',  y: 30, r:3342},
    { x: '2020-05-11T05:00:57Z',  y: 30, r:3234},
    { x: '2020-05-11T05:01:17Z',  y: 0.033, r:3343}
  ]
};

var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
  type: 'line',
  data: { datasets: [s1, s2] },
  options: {
    scales: {
      xAxes: [{
        type: 'time',
        distribution: 'series'
      }]
    },
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script>
<canvas id="myChart" height="100"></canvas>

Answer 1

tooltips callbacks是您的需要这是您达到r

的需要

data.datasets[tooltipItem[0].datasetIndex].data[tooltipItem[0].index].r

var ctx = document.getElementById('myChart').getContext('2d');
var s1 = {
  label: 'source',
  borderColor: 'blue',
  data: [
    { x: '2020-05-11T04:58:37Z',  y: 25, r:3001},
    { x: '2020-05-11T04:59:17Z',  y: 27, r:3002},
    { x: '2020-05-11T04:59:57Z',  y: 21, r:3003},
    { x: '2020-05-11T05:00:37Z',  y: 21, r:3004},
    { x: '2020-05-11T05:01:17Z',  y: 21, r:3456},
    { x: '2020-05-11T05:01:57Z',  y: 0.04, r:3243}
  ]
};

var s2 = {
  label: 'target',
  borderColor: 'red',
  data: [
    { x: '2020-05-11T04:58:37Z',  y: 28, r:3234},
    { x: '2020-05-11T04:59:17Z',  y: 31, r:3232},
    { x: '2020-05-11T04:59:57Z',  y: 27, r:5332},
    { x: '2020-05-11T05:00:37Z',  y: 30, r:3342},
    { x: '2020-05-11T05:00:57Z',  y: 30, r:3234},
    { x: '2020-05-11T05:01:17Z',  y: 0.033, r:3343}
  ]
};

var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
  type: 'line',
  data: { datasets: [s1, s2] },
  options: {
  tooltips:{
     callbacks: {
            title: function(tooltipItem,data) {
            console.log(data.datasets[tooltipItem[0].datasetIndex].data[tooltipItem[0].index].r);
                return "I am title";
            },
            label: function(tooltipItem) {
                return "I am content";
            }
        }
  } ,
    scales: {
      xAxes: [{
        type: 'time',
        distribution: 'series'
      }]
    },
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script>
<canvas id="myChart" height="100"></canvas>

Answer 2

您必须创建一个自定义工具提示，然后将r值附加到它。

您可以通过here

了解有关工具提示的信息

您可以像这样访问工具提示点的特定属性：

data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index].r

我写了一个自定义的回调函数来为您做这件事：）

var ctx = document.getElementById('myChart').getContext('2d');
var s1 = {
  label: 'source',
  borderColor: 'blue',
  data: [
    { x: '2020-05-11T04:58:37Z',  y: 25, r:3001},
    { x: '2020-05-11T04:59:17Z',  y: 27, r:3002},
    { x: '2020-05-11T04:59:57Z',  y: 21, r:3003},
    { x: '2020-05-11T05:00:37Z',  y: 21, r:3004},
    { x: '2020-05-11T05:01:17Z',  y: 21, r:3456},
    { x: '2020-05-11T05:01:57Z',  y: 0.04, r:3243}
  ]
};

var s2 = {
  label: 'target',
  borderColor: 'red',
  data: [
    { x: '2020-05-11T04:58:37Z',  y: 28, r:3234},
    { x: '2020-05-11T04:59:17Z',  y: 31, r:3232},
    { x: '2020-05-11T04:59:57Z',  y: 27, r:5332},
    { x: '2020-05-11T05:00:37Z',  y: 30, r:3342},
    { x: '2020-05-11T05:00:57Z',  y: 30, r:3234},
    { x: '2020-05-11T05:01:17Z',  y: 0.033, r:3343}
  ]
};

var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
  type: 'line',
  data: {
    datasets: [s1, s2]
  },
  options: {
    scales: {
      xAxes: [{
        type: 'time',
        distribution: 'series'
      }]
    },
    tooltips: {
      callbacks: {
        label: function(tooltipItem, data) {
          var label = data.datasets[tooltipItem.datasetIndex].label || '';

          if (label) {
            label += ':';
          }

          label += tooltipItem.yLabel;
          r = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index].r
          label += " r: " + r;
          return label;
        }
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script>
<canvas id="myChart" height="100"></canvas>

如何在chartjs工具提示中显示自定义数据

2 个答案: