Live Update Callback -> afterTitle with Array via JSON file

Question

我正在制作一个图表，我每 5 秒更新一次图表，数据进入。我可以设法从数据库中获取信息并非常容易地更新它，但我只是遇到了一个问题with 涉及设置图表一部分的路径，在这种情况下：options->tootltips->callbacks->afterTitle 并在其中创建一个数组并将数组从 JSON 传递到回调内的数组。

我需要做的，简而言之，因为我已经创建了一个函数来更新我的数据和标签中的信息，所以我需要在 inside this function，指向 afterTitle 的路径，然后我将能够发送第五个数组，其中存储数据。正如您在我的函数中看到的那样，我可以设法为数据和标签做到这一点。

我不能有另一个更新的函数，所以基本上我不能有 2 个 loadData()，因为它使 Chart 每次更新时都会闪烁，而事实并非如此我的目标是什么（图表不能闪烁）。

在这个补丁里面，我做了一个不起作用的例子，就是 //:

$.getJSON('loadchart.php', function(response) {
          myLineChart.data.datasets[0].data = response[0];
          myLineChart.data.datasets[1].data = response[1];
          myLineChart.data.datasets[2].data = response[2];
          myLineChart.data.datasets[3].data = response[3];
          myLineChart.data.labels = response[4];

          //The response array that I need is response[5];
          //myLineChart.options.tooltips.callbacks[1] = return response[tooltipItem[0]['index']]; 
          myLineChart.update();
        });

我所有的图表，所以你可以看到路径：

 <script>

    function loadData() {
      $.getJSON('loadchart.php', function(response) {
        myLineChart.data.datasets[0].data = response[0];
        myLineChart.data.datasets[1].data = response[1];
        myLineChart.data.datasets[2].data = response[2];
        myLineChart.data.datasets[3].data = response[3];
        myLineChart.data.labels = response[4];

        myLineChart.update();
      });
    }

    loadData();
    setInterval(loadData, 5000);

    var lbl = [];
    var ctx1 = document.getElementById('mychart1').getContext('2d');

    var myLineChart = new Chart(ctx1, {
        type: 'line', 
        data: {
          labels: lbl,
          datasets: [
            {
              label: "Corrente 1",
              data: [],
              borderWidht: 6,
              borderColor: 'red',
              backgroundColor: 'transparent'
            },
            {
              label: "Corrente 2",
              data: [],
              borderWidht: 6,
              borderColor: 'blue',
              backgroundColor: 'transparent'
            },
            {
              label: "Corrente 3",
              data: [],
              borderWidht: 6,
              borderColor: 'green',
              backgroundColor: 'transparent'
            },
            {
              label: "Corrente Total",
              data: [],
              borderWidht: 6,
              borderColor: 'black',
              backgroundColor: 'transparent'
            },
          ]            
        },
        options: {
          animation:{
            update: 0
          },
          scales: {
            yAxes: [{
              ticks: {
                beginAtZero: true
              }
            }],
            xAxes: [{
              gridLines: {
                display: false
              }
            }]
          },

          title: {
            display: true,
            fontSize: 20,
            text: "Gráfico das Correntes"
          },

          labels: {
            fontStyle: "bold",
          },

          layout: {
            padding: {
              left: 0,
              right: 0,
              top: 0,
              bottom: 0
            }
          },
          tooltips: {
            enabled: true,
            mode: 'single',
            responsive: true,
            backgroundColor: 'black',
            titleFontFamily: "'Arial'",
            titleFontSize: 14,
            titleFontStyle: 'bold',
            titleAlign: 'center',
            titleSpacing: 4,
            titleMarginBottom: 10,
            bodyFontFamily: "'Mukta'",
            bodyFontSize: 14,
            borderWidth: 2,
            borderColor: 'grey',
            callbacks:{
              title: function(tooltipItem, data) {
                  return data.labels[tooltipItem[0].index];
              },
              afterTitle: function(tooltipItem, data) {
                var tempo = [];
                return tempo[tooltipItem[0]['index']];
              },
              label: function(tooltipItem, data) {
                    var label = data.datasets[tooltipItem.datasetIndex].label || '';                  
                    if (label) {
                        label += ': ';
                    }
                    label += (tooltipItem.yLabel)+"A";                  
                    return label;
              }
            }
          },
          aspectRatio: 1,
          maintainAspectRatio: false
        }
    });
</script>

我需要的是这个：

afterTitle: function(tooltipItem, data) {
                var tempo = [];
                return tempo[tooltipItem[0]['index']]; 

Answer 1

这将显示一个时钟，但您也可以将其设置为 5000 秒并调用您的图表更新。我建议加入某种 AJAX 让它异步工作。

            <!DOCTYPE html>
            <html>
            <head>
            <script>
            function startTime() {
              var today = new Date();
              var h = today.getHours();
              var m = today.getMinutes();
              var s = today.getSeconds();
              m = checkTime(m);
              s = checkTime(s);
              document.getElementById('txt').innerHTML =
              h + ":" + m + ":" + s;
              var t = setTimeout(startTime, 500);  //<----  !!!
            }
            function checkTime(i) {
              if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
              return i;
            }
            </script>
            </head>

            <body onload="startTime()">

            <div id="txt"></div>

            </body>
            </html>

Answer 2

正如您在 afterTitle 函数中提到的那样，您想要创建一个数组并将该数组从 JSON 传递到回调内的一个数组，而缺少的部分是您正在创建一个数组 tempo 并将其视为一个对象tempo[tooltipItem[0]['index']];，但是你需要做的是把这个对象tooltipItem[0]['index']推到tempo数组中。

请用下面的代码替换afterTitle函数

afterTitle: function(tooltipItem, data) {
            var tempo = [];
            return tempo.push(tooltipItem[0]['index']);