Chart.js 使用不同的标签操作图表中的每个条形图 [英] Chart.js manipulate each bar in chart with different labels

问题描述

有谁知道这是否可行?基本上我希望图表有标签，例如 [Jan, Feb, March]，我希望能够打开和关闭这些值.看起来很简单，但事实证明是有问题的.

does anyone know if this is possible? Basically I want the chart to have labels for example [Jan, Feb, March] and I want to be able to toggle these values on and off. Seems like such a simple thing but is proving problematic.

推荐答案

您可以为每个条形创建单独的dataset，并以点格式定义data，如下所示:

You can create a separate dataset for each bar and define the data in point format as follows:

data: [{ x: 1, y: 16 }]

您还需要定义第二个包含标签的 x 轴.

Further you need to define a second x-axis that will contain the labels.

{
  offset: true,
  gridLines: {
    display: false
  }
}

每次 dataset 的 hidden 状态发生变化时，都需要以编程方式收集和定义第二个 x 轴上的 labels.这可以通过 插件核心 API.API 提供了不同的钩子，可用于执行自定义代码.在您的情况下，您可以使用 beforeLayout 钩子.

The labels on the second x-axis need to be collected and defined programmatically each time the hidden state of a dataset changes. This can be done with the Plugin Core API. The API offers different hooks that may be used for executing custom code. In your case, you can use the beforeLayout hook.

plugins: [{
  beforeLayout: chart => chart.chart.options.scales.xAxes[1].labels = chart.chart.data.datasets.filter(ds => !ds._meta[0].hidden).map(ds => ds.label)
}]

请看下面的可运行代码，看看它是如何工作的.

Please take a look at below runnable code and see how it works.

new Chart(document.getElementById('chart'), {
  type: 'bar',
  plugins: [{
    beforeLayout: chart => chart.chart.options.scales.xAxes[1].labels = chart.chart.data.datasets.filter(ds => !ds._meta[0].hidden).map(ds => ds.label)
  }],
  data: {
    datasets: [{
        label: 'A',
        data: [{ x: 1, y: 16 }],
        backgroundColor: 'rgba(255, 99, 132, 0.2)',
        borderColor: 'rgb(255, 99, 132)',
        borderWidth: 1,
        categoryPercentage: 1
      },
      {
        label: 'B',
        data: [{ x: 2, y: 22 }],
        backgroundColor: 'rgba(255, 159, 64, 0.2)',
        borderColor: 'rgb(255, 159, 64)',
        borderWidth: 1,
        categoryPercentage: 1
      },
      {
        label: 'C',
        data: [{ x: 3, y: 18 }],
        backgroundColor: 'rgba(255, 205, 86, 0.2)',
        borderColor: 'rgb(255, 205, 86)',
        borderWidth: 1,
        categoryPercentage: 1
      },
      {
        label: 'D',
        data: [{ x: 4, y: 13 }],
        backgroundColor: 'rgba(75, 192, 192, 0.2)',
        borderColor: 'rgb(75, 192, 192)',
        borderWidth: 1,
        categoryPercentage: 1
      },
      {
        label: 'E',
        data: [{ x: 5, y: 5 }],
        backgroundColor: 'rgba(54, 162, 235, 0.2)',
        borderColor: 'rgb(54, 162, 235)',
        borderWidth: 1,
        categoryPercentage: 1
      },
      {
        label: 'F',
        data: [{ x: 6, y: 16 }],
        backgroundColor: 'rgba(153, 102, 255, 0.2)',
        borderColor: 'rgb(153, 102, 255)',
        borderWidth: 1,
        categoryPercentage: 1
      },
    ]
  },
  options: {
    tooltips: {
      callbacks: {
        title: () => undefined
      }
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }],
      xAxes: [{
          display: false
        },
        {
          offset: true,
          gridLines: {
            display: false
          }
        }
      ]
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.bundle.min.js"></script>
<canvas id="chart" height="80"></canvas>

这篇关于Chart.js 使用不同的标签操作图表中的每个条形图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！