如何在 Chart.js 2.1.6 的图例中显示条形标签？答案

【问题标题】：How to show bar labels in legend in Chart.js 2.1.6?如何在 Chart.js 2.1.6 的图例中显示条形标签？
【发布时间】：2016-07-21 23:13:02
【问题描述】：

我正在使用 Chart.js 创建图表，我想在图例中显示条形的标签，不是数据集的标题（只有一个），请参见下文以图片为例：

我现在的传说是这样的：

我浏览了文档但无济于事，实际上我发现它们非常混乱。

这是我当前的代码：

var chart_0 = new Chart($('#cp_chart_0'), {
      type: 'bar'
    , data: {
          labels: ['Blue','Green','Yellow','Red','Purple','Orange']
        , datasets: [{
              label: 'Dataset 1'
            , borderWidth: 0
            , backgroundColor: ['#2C79C5','#7FA830','#7B57C3','#ED4D40','#EC802F','#1DC6D3']
            , data: ['12','2','5','0','9','1']
        }]
      }
});

谢谢！

【问题讨论】：

标签： javascript chart.js

【解决方案1】：

在 Chart.js 2.1.x 的最新版本之一中，他们重新添加了此功能。所以先去获取最新版本。然后在下面插入代码。

它位于选项和图例下方。以下是你的使用方法：

options: {
    legend: {
        position: 'right'
    }
}

【讨论】：

非常感谢您的提示！我最终选择了 Hugo 的答案，将其拆分为多个数据集，并使用 chart_0.generateLegend() 创建了我自己的图例，因此我可以更好地控制它 - 但在拆分为多个数据集后，这也有效。

【解决方案2】：

最简单的方法是为您的数据提供多个集合：

  data: {
      labels: ['total votes']
    , datasets: [{
          label: 'Blue'
        , backgroundColor: ['#2C79C5']
        , data: ['12']
    },{
          label: 'Green'
        , backgroundColor: ['#7FA830']
        , data: ['2']
    },
    ...
    ]
  }

但您可以使用generateLabels - http://www.chartjs.org/docs/#chart-configuration-legend-configuration 生成自定义标签

甚至可以自定义整个图例，包括格式，使用legendCallback - http://www.chartjs.org/docs/#chart-configuration-common-chart-configuration

【讨论】：

成功了，谢谢！我分成多组，然后用chart_0.generateLegend() 创建了我自己的图例，这样我可以更好地控制它。

【解决方案3】：

此解决方案使用 Chart.js 版本 3。您可以使用Plugin Core API 预处理您的数据。 API 提供了不同的钩子，可用于执行自定义代码。

我使用beforeInit 挂钩为每个定义的标签/值对创建单独的数据集。请注意，这些新数据集的data 以点格式定义（例如[{ x: 1, y: 12 }]）：

beforeInit: chart => {
  let dataset = chart.config.data.datasets[0];
  chart.config.data.datasets = chart.config.data.labels.map((l, i) => ({
    label: l,
    data: [{ x: i + 1, y: dataset.data[i] }],
    backgroundColor: dataset.backgroundColor[i],
    categoryPercentage: 1
  }));
  chart.config.data.labels = undefined;
}

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

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

每次dataset 的hidden 状态发生变化时，都需要以编程方式收集和定义x1 上的labels。这可以在beforeLayout 挂钩中完成。

beforeLayout: chart => chart.options.scales.x1.labels = chart.config.data.datasets.filter((ds, i) => !chart.getDatasetMeta(i).hidden).map(ds => ds.label)

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

new Chart('chart', {
  type: 'bar',
  plugins: [{
    beforeInit: chart => {      
      let dataset = chart.config.data.datasets[0];
      chart.config.data.datasets = chart.config.data.labels.map((l, i) => ({
        label: l,
        data: [{ x: i + 1, y: dataset.data[i] }],
        backgroundColor: dataset.backgroundColor[i],
        categoryPercentage: 1
      }));
      chart.config.data.labels = undefined;
    },
    beforeLayout: chart => chart.options.scales.x1.labels = chart.config.data.datasets.filter((ds, i) => !chart.getDatasetMeta(i).hidden).map(ds => ds.label)
  }],
  data: {
    labels: ['Blue', 'Green', 'Yellow', 'Red', 'Purple', 'Orange'],
    datasets: [{
      data: ['12', '2', '5', '0', '9', '1'],
      backgroundColor: ['#2C79C5', '#7FA830', '#FFF200', '#ED4D40', '#800080', '#EC802F']
    }]
  },
  options: {
    interaction: {
      intersect: true,
      mode: 'nearest'
    },
    plugins: {
      legend: {
        position: 'right'
      },
      tooltip: {
        callbacks: {
          title: () => undefined
        }
      }
    },   
    scales: {
      y: {
        beginAtZero: true
      },
      x: {
        display: false
      },
      x1: {
        offset: true,
        gridLines: {
          display: false
        }
      }
    }
  }
});

canvas {
  max-width: 400px;
}

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

【讨论】：