Question

我正在使用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']
        }]
      }
});

谢谢！

Answer 1

最简单的方法是为您的数据提供多套：

  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

自定义整个图例，包括格式

Answer 2

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

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

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

Answer 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
  }
}

每次 labels 的 x1 状态更改时，都需要以编程方式收集和定义 hidden 上的 dataset。这可以在 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>

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

3 个答案: