ChartJS 如何对数据集的图例进行分组?一次切换可以切换多个数据集吗?

f5emj3cl  于 2022-12-18  发布在  Chart.js
关注(0)|答案(1)|浏览(183)

我尝试将6个不同的数据集组组合在一起,因此我有一个“-15”数据集、“15”数据集等的切换。x1c 0d1x
以下是我目前掌握的情况:

var labels = [];
    for (let index = 0; index < 12; index++) {
        labels.push(index);
    }

        window.onload = function () {
            var canvas = document.getElementById('elm-chart'),
            ctx = canvas.getContext('2d');

            var myLineChart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: labels,
                    datasets: [
                {
                    label: '-15',
                    data: [
                        {
                            x: 0,
                            y: 10,
                        },
                        {
                            x: 1,
                            y: 20,
                        },
                    ],
                    borderColor: 'red',
                },
                {
                    label: '15',
                    data: [
                        {
                            x: 1,
                            y: 20,
                        },
                        {
                            x: 2,
                            y: 30,
                        },
                    ],
                    borderColor: 'blue',
                },
                {
                    label: '25',
                    data: [
                        {
                            x: 2,
                            y: 30,
                        },
                        {
                            x: 3,
                            y: 35,
                        },
                    ],
                    borderColor: 'yellow',
                },
                {
                    label: '-15',
                    data: [
                        {
                            x: 6,
                            y: -10,
                        },
                        {
                            x: 7,
                            y: -20,
                        },
                    ],
                    borderColor: 'red',
                },
                {
                    label: '15',
                    data: [
                        {
                            x: 7,
                            y: -20,
                        },
                        {
                            x: 8,
                            y: -30,
                        },
                    ],
                    borderColor: 'blue',
                },
                {
                    label: '25',
                    data: [
                        {
                            x: 8,
                            y: -30,
                        },
                        {
                            x: 9,
                            y: -35,
                        },
                    ],
                    borderColor: 'yellow',
                },
            ],

                },
                options: {
                    responsive: true,
            scales: {
                x: {
                    type: 'linear',
                    suggestedMin: labels.reduce((pv, cv) => Math.min(pv, cv)),
                    suggestedMax: labels.reduce((pv, cv) => Math.max(pv, cv)),
                    ticks: {
                        stepSize: 30,
                    },
                },
            },
                }
            });
        }
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.1/chart.min.js" ></script>
<canvas id="elm-chart" width="640" height="480"></canvas>

从我目前为止读到的文档来看,我找不到任何可以直接编辑图例的东西,只能切换隐藏或不隐藏。没有任何关于编辑图例列表的东西

iyfjxgzm

iyfjxgzm1#

您可以将自定义legendOnClick处理程序与标签过滤器一起编写:

var labels = [];
for (let index = 0; index < 12; index++) {
  labels.push(index);
}

window.onload = function() {
  var canvas = document.getElementById('elm-chart'),
    ctx = canvas.getContext('2d');

  var myLineChart = new Chart(ctx, {
    type: 'line',
    data: {
      labels: labels,
      datasets: [{
          label: '-15',
          data: [{
              x: 0,
              y: 10,
            },
            {
              x: 1,
              y: 20,
            },
          ],
          borderColor: 'red',
        },
        {
          label: '15',
          data: [{
              x: 1,
              y: 20,
            },
            {
              x: 2,
              y: 30,
            },
          ],
          borderColor: 'blue',
        },
        {
          label: '25',
          data: [{
              x: 2,
              y: 30,
            },
            {
              x: 3,
              y: 35,
            },
          ],
          borderColor: 'yellow',
        },
        {
          label: '-15',
          data: [{
              x: 6,
              y: -10,
            },
            {
              x: 7,
              y: -20,
            },
          ],
          borderColor: 'red',
        },
        {
          label: '15',
          data: [{
              x: 7,
              y: -20,
            },
            {
              x: 8,
              y: -30,
            },
          ],
          borderColor: 'blue',
        },
        {
          label: '25',
          data: [{
              x: 8,
              y: -30,
            },
            {
              x: 9,
              y: -35,
            },
          ],
          borderColor: 'yellow',
        },
      ],

    },
    options: {
      responsive: true,
      plugins: {
        legend: {
          onClick: (evt, legendItem, legend) => {
            let newVal = !legendItem.hidden;
            legend.chart.data.datasets.forEach(dataset => {
              if (dataset.label === legendItem.text) {
                dataset.hidden = newVal
              }
            });
            legend.chart.update();
          },
          labels: {
            filter: (legendItem, chartData) => {
              let entries = chartData.datasets.map(e => e.label);
              return entries.indexOf(legendItem.text) === legendItem.datasetIndex;
            }
          }
        },
      },
      scales: {
        x: {
          type: 'linear',
          suggestedMin: labels.reduce((pv, cv) => Math.min(pv, cv)),
          suggestedMax: labels.reduce((pv, cv) => Math.max(pv, cv)),
          ticks: {
            stepSize: 30,
          },
        },
      },
    }
  });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.1/chart.min.js"></script>
<canvas id="elm-chart" width="640" height="480"></canvas>

相关问题