javascript - 如何停止在 Chart JS 2.x 上显示来自不同数据对象的数据值？

Question

我正在使用 Chart JS 2.5 在条形图中可视化 2 个数据对象，并且我可以可视化两个对象的数据值，但是当我想查看一个数据对象的数据值时，我仍然看到第二个数据对象。

数据对象 2 已取消选择，但我仍然可以看到它的值。

HTML

<canvas id="myChart" width="100" height="100"></canvas>

JS脚本

var ctx = document.getElementById("myChart");
debugger;
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["2 Jan", "9 Jan", "16 Jan", "23 Jan", "30 Jan", "6 Feb", "13 Feb"],
    datasets: [{
        label: 'Data object 1',
        data: [6, 87, 56, 15, 88, 60, 12],
        fill: false,
        backgroundColor: "#4082c4",
    },

    {
        label: 'Data object 2',
        data: [16, 57, 23, 60, 88, 40, 42],
        fill: false,
        backgroundColor: "#9082d4",
    }]
    },
     options: {
        "hover": {
        "animationDuration": 1
    },
    "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);
                        ctx.textAlign = 'center';
                        ctx.textBaseline = 'bottom';

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

    legend:{
        "display": true
       },
    tooltips: {
        "enabled": true
     },
    scales: {
        yAxes: [{
                display: false,
                gridLines: {
                display : false
            },
            ticks: {
                    display: false,
                beginAtZero:true
                }
            }],
            xAxes: [{
                    gridLines: {
                    display : false
                },
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.2/Chart.js"</script>

JS fiddle Edit online

如何查看所选数据对象的数据值而不是显示所有数据值？

条形图、折线图、极坐标图和雷达图均存在此行为。

Answer 1

基本上，在完成动画绘制文本之前，您需要检查特定数据集是否隐藏。

要实现此目的，您只需将 onComplete 函数替换为以下内容...

"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);
   ctx.textAlign = 'center';
   ctx.textBaseline = 'bottom';

   this.data.datasets.forEach(function(dataset, i) {
      var isHidden = dataset._meta[0].hidden; //'hidden' property of dataset
      if (!isHidden) { //if dataset is not hidden
         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);
         });
      }
   });
}

ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ ⧩

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
   type: 'bar',
   data: {
      labels: ["2 Jan", "9 Jan", "16 Jan", "23 Jan", "30 Jan", "6 Feb", "13 Feb"],
      datasets: [{
            label: 'Data object 1',
            data: [6, 87, 56, 15, 88, 60, 12],
            fill: false,
            backgroundColor: "#4082c4",
         },
         {
            label: 'Data object 2',
            data: [16, 57, 23, 60, 88, 40, 42],
            fill: false,
            backgroundColor: "#9082d4",
         }
      ]
   },
   options: {
      "hover": {
         "animationDuration": 1
      },
      "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);
            ctx.textAlign = 'center';
            ctx.textBaseline = 'bottom';

            this.data.datasets.forEach(function(dataset, i) {
               var isHidden = dataset._meta[0].hidden; //'hidden' property of dataset
               if (!isHidden) { //if dataset is not hidden
                  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);
                  });
               }
            });
         }
      },
      legend: {
         "display": true
      },
      tooltips: {
         "enabled": true
      },
      scales: {
         yAxes: [{
            display: false,
            gridLines: {
               display: false
            },
            ticks: {
               display: false,
               beginAtZero: true
            }
         }],
         xAxes: [{
            gridLines: {
               display: false
            },
            ticks: {
               beginAtZero: true
            }
         }]
      }
   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="myChart"></canvas>