Chart.js -更改图例用于彩色框的数据

vnjpjtjt 于 2022-11-06 发布在 Chart.js

关注(0)|答案(2)|浏览(162)

我有一个条形图，它总是显示4个条形。条形是动态着色的。看起来彩色框的颜色来自第一个数据。我想使用第四个（最后一个）数据值的颜色。也许options:plugins:legend:label:sort函数有帮助，但我不明白它的作用。

选项

const options = {
  scales: {
    x: {
      grid: {
        display: false,
        color: 'rgba(0,0,0)'
      }
    },
    y: {
      display: false,
      min: 0,
      max: 4
    },
  },
  plugins: {
     legend: {
        position: 'bottom'
     }
   }
}

因此，我不知道是否可以更改框颜色的数据来源，或者是否有一个配置选项，我可以手动更改它。

chart.js

来源：https://stackoverflow.com/questions/68887183/chart-js-change-which-data-the-legend-uses-for-the-coloured-box

2条答案

按热度按时间

bis0qfac1#

您可以按照此处所述使用generateLabels函数。
请看下面的可运行的示例代码，看看它是如何工作的。
第一个

赞(0）回复(0）举报 2022-11-06

r3i60tvu2#

根据@uminder的回答，如果您希望在单击图例后保留隐藏/显示图表和贯穿线样式，则可以添加以下行：

options: {
  responsive: false,
  plugins: {
    legend: {
      labels: {
        generateLabels: chart => {
          let ds = chart.data.datasets[0];
          let color = ds.backgroundColor[ds.backgroundColor.length - 1];
          return [{
            datasetIndex: 0,
            text: ds.label,
            fillStyle: color,
            strokeStyle: color,
+           hidden: !chart.isDatasetVisible(0)
          }];
        }
      }
    }
  }
}

赞(0）回复(0）举报 2022-11-06

我来回答

Chart.js -更改图例用于彩色框的数据

2条答案

相关问题

热门标签

最新问答