Chartjs传说的不同边界颜色

发布于 2025-01-22 05:35:32 字数 285 浏览 0 评论 0原文

我需要为传说设置与实际图表不同的边框颜色。每当我在图表数据中添加边框颜色时，它都会应用于图例和图表。而且我找不到为传奇设置不同边框颜色的任何选择nofollow noreferrer“>在文档中

这是我想实现的目标的屏幕截图？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

暮色兮凉城 2025-01-29 05:35:32

我发现这样做的唯一方法以及传说中的其他一些自定义是实现传奇项目接口。

接受的答案在这里与传奇项目接口结合使用，应该是一个不错的开始。

这是 jsfiddle 我从该答案中做出的，但对ChartJS 3.7.1进行了更新。重点关注的主要部分是：

options: {
plugins: {
  legend: {
    labels: {
      usePointStyle: true,

      generateLabels: function(chart) {
        var data = chart.data;
        if (data.labels.length && data.datasets.length) {
          return data.labels.map(function(label, i) {
          
            var meta = chart.getDatasetMeta(0);
            var ds = data.datasets[0];
            return {
              text: label,
              fillStyle: ds.backgroundColor[i],
              strokeStyle: ds.legendOutline[i],
              lineWidth: ds.borderWidth,
              hidden: isNaN(ds.data[i]) || meta.data[i].hidden,
              index: i
            };
          });
        } else {
          return [];
        }
      }
    }
  }
}

Strokestyle是大纲属性，我在数据集中介绍了一个名为LegendOutline的字段。 LegendOutline和数据集中的数据均为i引用，因此LegendOutline [i]指向表示数据[i]的标签

The only way I have found to do this and some other customisation on the legend is to implement the legend item interface.

The accepted answer here in combination with the legend item interface should be a good start.

Here's a jsfiddle that I made from that answer, but updated for chartjs 3.7.1. The main part to focus on is this:

options: {
plugins: {
  legend: {
    labels: {
      usePointStyle: true,

      generateLabels: function(chart) {
        var data = chart.data;
        if (data.labels.length && data.datasets.length) {
          return data.labels.map(function(label, i) {
          
            var meta = chart.getDatasetMeta(0);
            var ds = data.datasets[0];
            return {
              text: label,
              fillStyle: ds.backgroundColor[i],
              strokeStyle: ds.legendOutline[i],
              lineWidth: ds.borderWidth,
              hidden: isNaN(ds.data[i]) || meta.data[i].hidden,
              index: i
            };
          });
        } else {
          return [];
        }
      }
    }
  }
}

strokeStyle is the outline property, and I've made a field in the dataset called legendOutline. legendOutline and the data from the dataset are both referenced with i, so the legendOutline[i] points to the label representing data[i]

回复收藏 0 原文

~没有更多了~