chart.js 2.x 中的自动颜色分配不再起作用，用于 v. 1.x

2023-11-01前端开发问题

本文介绍了chart.js 2.x 中的自动颜色分配不再起作用，用于 v. 1.x的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着跟版网的小编来一起学习吧！

问题描述

使用 Chart.js 1.x 我可以创建一个饼图并自动分配颜色:

Using Chart.js 1.x I could create a pie chart and get the colors automatically assigned:

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.1.1/Chart.js"></script>
<body>
<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById("myChart").getContext("2d");
var data = [{"label":"Conservative","value":"5"},{"label":"Democratic","value":"6"}];
var myChart = new Chart(ctx).Pie(data);
</script>
</body>

如果我对 v 2.x 做同样的事情

if I do the same with v 2.x

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.bundle.js"></script>
<body>
<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById("myChart").getContext("2d");{"label":"Democratic","value":"6"}];
var myChart = new Chart(ctx, {
    type: 'pie',
    data: {
        labels: ["Conservative", "Democratic"],
        datasets: [{
            data: [5, 15],
        }]
    }
});
</script>
</body>

除非我手动指定颜色，否则整个饼图都显示为灰色；我错过了什么吗?我发现的唯一相关问题是:Chart.js 中的随机填充颜色但是，如上所述，它在 1.x 上完美运行，所以对我来说似乎很奇怪，它不再工作了.

the whole Pie is displayed in Grey unless I specify the colors manually; am I missing something? The only related question I've found is this one: Random fill colors in Chart.js however, as explained above, it perfectly worked on 1.x so it seems strange to me it doesn't work anymore.

推荐答案

我相信创建配色方案本身就是一门科学.对我来说，Chart.js 中省略了类似的东西是有道理的，因为还有更多的关键目标需要追求.

I believe that creation of color schemes is a whole science of its own. It makes sense to me that something like that has been left out of Chart.js, since there are more critical goals to pursue.

docs 中图表示例中使用的所有颜色均已明确定义.这个两个月大的问题具有来自图表的分类响应.js 成员，默认颜色在 Chart.js 2 中不可用.

All colors used in chart examples in the docs are defined explicitly. And this two-month-old issue features a categorical response from a Chart.js member that default colors are not available in Chart.js 2.

所以，你有三个选择.

第一选择是自己做一些颜色.我想你不会问这个问题，如果你遇到过这样的事情(我知道结果会很糟糕，如果我做了这样的事情).

第二种选择是在网上寻找配色方案和配色方案生成器，然后挑选一些你喜欢的配色方案.

The second choice is to look for color schemes and color scheme generators online and pick some color schemes that please you.

第三个有趣的选择是寻找一个可以随意生成配色方案的 JavaScript 库.

The third and interesting choice is to look for a JavaScript library that can produce color schemes at will.

有几个替代选择.调色板生成器是一个不错的工具，它可以在非常宽松的许可下使用.您可以在这里看到它在 Chart.js 2 中的作用.该示例也可在下面获得:

There are a couple of alternative choices. A nice one, which is available under very permissive licensing, is the Colour Palette Generator. You may see it in action along Chart.js 2 here. The sample is also available below:

var ctx = document.getElementById("myChart");
var myData = [12, 19, 3, 5, 2, 3];
var myChart = new Chart(ctx, {
  type: 'pie',
  data: {
    labels: ["First", "Second", "Third", "Fourth", "Fifth", "Sixth"],
    datasets: [{
      label: '# of Votes',
      data: myData,
      backgroundColor: palette('tol', myData.length).map(function(hex) {
        return '#' + hex;
      })
    }]
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
<script src="https://raw.githubusercontent.com/google/palette.js/master/palette.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>

这里描述了如何使用该库.简而言之，您可以使用以下方法从特定配色方案创建一个 10 色调色板:

How to use the library is described here. In short, you may create a 10-color palette from a specific color scheme using the following:

var seq = palette('tol-sq', 10);

结果是一个十六进制字符串数组(例如eee8d5").为了在 Chart.js 期望颜色的地方使用它，您可以使用 map 在前面加上#";到每个字符串，就像上面的例子一样.

The result is an array of hex strings (e.g. "eee8d5"). In order to use it where Chart.js is expecting colors, you may use map to prepend "#" to each string, like in the example above.

这篇关于chart.js 2.x 中的自动颜色分配不再起作用，用于 v. 1.x的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！

The End

相关推荐

如何使用百度地图API获取地理位置信息

js删除数组中指定元素的5种方法

JavaScript小数运算出现多位的解决办法

JavaScript(js)文件字符串中丢失＂\＂斜线的解决方法

layui中table列表增加属性 edit=＂date＂，不生效怎么办？

正则表达式([A-Za-z])为啥可以匹配字母加数字或特殊符号？

热门文章

热门精品源码

最新VIP资源