Question

现在，回调（悬停时）显示数据集中的数据。我想用不同的值更改每个点。为此，我具有与原始数据数组相同的大小数组。

我尝试过

tooltips: {
     callbacks: {
       label: function(tooltipItem, data) {

       return measures;
       }
     }
},

但是它返回了每个点的整个数组。

图表可以包含1个以上的数据集。它们在for循环中动态创建。我也尝试过动态创建回调

call[r] = {
   abel: function(tooltipItem, data) {
   return measures;
   }
};

tooltips: {
     callbacks: call
},

但这只是引发TypeErrors

TypeError：c.callbacks.labelColor未定义

TypeError：电子标题未定义

如何使每个数组元素在不同的点上？并在有多个数据集的情况下显示与数据集相同的位置数组中的值？

对不起，如果我不清楚。只是不能完全包住我的头。

谢谢！

Answer 1

我已经在我的一个项目中实现了通电时间持续时间的图表。我已经用代码引用了您。请查看是否有帮助。

标签数组：

数组（9） 0 ： “ 2018-09-17” 1个： “ 2018-09-17” 2 ： “ 2018-09-17” 3 ： “ 2018-09-17” 4 ： “ 2018-09-17” 5 ： “ 2018-09-17” 6 ： “ 2018-09-17” 7 ： “ 2018-09-17” 8 ： “ 2018-09-18”

数据数组：

数组（9） 0 ： “ 200” 1个： “ 211” 2 ： “ 234” 3 ： “ 255” 4 ： “ 300” 5 ： “ 321” 6 ： “ 400” 7 ： “ 421” 8 ： “ 00421”

<script>
 var powerontimedata_chart_labels=[];
 var powerontimedata_chart_data=[];

function initiateChart(labels, data){
    chart_labels=JSON.parse(labels);
    chart_data=JSON.parse(data);
    console.log(powerontimedata_chart_labels);
    console.log(powerontimedata_chart_data);
    plotDataLineChart();
 }

function plotDataLineChart(){
  var lineChartOptions = {
 maintainAspectRatio: false,
steppedLine         : 'after',
responsive : true,
showTooltips : false,
showInlineValues : true,
centeredInllineValues : true,
tooltipCaretSize : 0,
tooltipTemplate : "<%= value %>",
scales: {
  xAxes: [{

                position: "right",
                scaleLabel: {
                    display: true,
                    stepSize : 1,
                    autoSkip: false,
                    labelString: "Date",
                    fontFamily: "Montserrat",
                    fontColor: "black",
                },

    ticks:{
      stepSize : 2,
      autoSkip: true
    }
  }],
  yAxes: [{

    position: "left",
                scaleLabel: {
                    display: true,
                    stepSize : 1,
                    autoSkip: false,
                    labelString: "Time in Hour",
                    fontFamily: "Montserrat",
                    fontColor: "black",
                },
    ticks: {

      beginAtZero:true,

      autoSkip: true
    }
  }]
},
"animation": {
  "duration": 1,
  "onComplete": function() {
    var chartInstance = this.chart,
    ctx = chartInstance.ctx;

    ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
    console.log(ctx);
    ctx.textAlign = 'center';
    ctx.textBaseline = 'bottom';
    ctx.fillStyle = '#ff0000';

    this.data.datasets.forEach(function(dataset, i) {
      var meta = chartInstance.controller.getDatasetMeta(i);
      meta.data.forEach(function(bar, index) {
        var data = dataset.data[index];
        ctx.fillText(data, bar._model.x, bar._model.y - 5);
      });
    });
  }
},
        //multiTooltipTemplate: "<%= datasetLabel %> - <%= value %>"

    };

    var lineChartCanvas          = $('#weekbarChart').get(0).getContext('2d')


    var ontime = {
      labels : chart_labels,
      datasets : [
      {
        label : 'Power Ontime',
        fill                :  true,
        borderColor : "#FF0000",
        backgroundColor : "#F5B7B1",

        data : powerontimedata_chart_data,
        steppedLine: false,
        pointStyle: 'clearInterval',
        pointBorderColor : "#FF0000",


    }
    ]
}
realTimeChart = new Chart(lineChartCanvas, {
  type: 'line',
  data: ontime,
  options: lineChartOptions
});


}
initiateChart('<?= json_encode($chart["labels"])?>','<?= json_encode($chart["data"])?>');
</script>

我的图形显示为：

图表js不同的回调标签

1 个答案: