chart.js 2.x中的自动颜色分配不再起作用,而在v. 1.x中则起作用

wmtdaxz3  于 2022-12-04  发布在  Chart.js
关注(0)|答案(4)|浏览(157)

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

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

如果我对v2.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>

除非我手动指定颜色,否则整个饼图显示为灰色;我是否遗漏了什么?我找到的唯一相关问题是:Random fill colors in Chart.js然而,如上所述,它在1.x上完美地工作,所以对我来说它不再工作似乎很奇怪。

r7knjye2

r7knjye21#

我相信配色方案的创建本身就是一门完整的科学。对我来说,Chart.js没有考虑到这一点是有道理的,因为还有更关键的目标需要追求。
docs中图表示例中使用的所有颜色都是显式定义的。并且this two-month-old issue具有来自Chart.js成员的分类响应,即默认颜色在Chart.js 2中不可用。
你有三个选择。

  • 第一个选择是自己做一些颜色。我想你不会问这个问题,如果你喜欢这样的东西(我知道结果会很可怕,如果 * 我 * 做这样的东西)。
  • 第二个选择是在网上寻找配色方案和配色方案生成器,挑选一些让你满意的配色方案。
  • 第三个也是有趣的选择是寻找一个可以随意生成颜色方案的JavaScript库。

有几个替代选择。一个不错的选择是Colour Palette Generator,它在非常宽松的许可下提供。您可以在Chart.js 2 here中看到它的运行情况。下面也提供了该示例:
第一个
here介绍了如何使用该库。简而言之,您可以使用以下方法从特定配色方案创建10色调色板:

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

结果是一个十六进制字符串数组(例如“eee8d5”)。为了在Chart.js需要颜色的地方使用它,您可以使用map在每个字符串前面加上“#”,就像上面的例子一样。

velaa5lx

velaa5lx2#

我实际上会推荐ChartsJS-Plugin-ColorSchemes。简单地在chartjs之后导入它就足以让你有自动着色,但是添加选项将允许你制作自定义调色板,例如。

...

  options: {

    plugins: {

      colorschemes: {

        scheme: 'tableau.Tableau20'

      }

    }

  }
gorkyyrv

gorkyyrv3#

Chart.js添加自动颜色生成的另一种方法是使用插件:
chartjs-plugin-autocolors

import autocolors from 'chartjs-plugin-autocolors';

Chart.register(autocolors);

const chart = new Chart(ctx, {
  // ...
  options: {
    plugins: {
      autocolors: {
        mode: 'data'
      }
    }
  }
});

注意:此插件需要Chart.js 3.0或更高版本

n9vozmp4

n9vozmp44#

随机颜色动态图
当数据和标签是动态时

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  type: 'pie',
  data: {
    labels: label,
    datasets: [{
      label: '# of Votes',
      data: data,
      backgroundColor: getRandomColor(data.length)
      })
    }]
  }
});
function getRandomColor(count) {
var arr = [];
for (var i = 0; i < count; i++) {
   var letters = '0123456789ABCDEF'.split('');
   ar color = '#';
      for (var x = 0; x < 6; x++) {
          color += letters[Math.floor(Math.random() * 16)];
      }
      colors.push(color);
      }
   return colors;
}

相关问题