Chart.js 2.x 中自动颜色分配不再起作用，而在 v. 1.x 中是可以的。

Question

Chart.js 2.x 中自动颜色分配不再起作用，而在 v. 1.x 中是可以的。

47

使用 Chart.js 1.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>

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

如果我不手动指定颜色，整个饼图都会显示为灰色。我是不是漏掉了什么？我找到的唯一相关问题是这个：Random fill colors in Chart.js然而，如上所述，它在1.x版本中完美运行，所以我觉得它不再起作用很奇怪。

- Eugenio

4个回答

22

我实际上会推荐 ChartsJS-Plugin-ColorSchemes。只需在导入Chart.js后导入它就足以让您自动着色，但添加选项将允许您创建自定义调色板，例如。

...

  options: {

    plugins: {

      colorschemes: {

        scheme: 'tableau.Tableau20'

      }

    }

  }

- SARose

4

这个选项很好，但只适用于多个数据集。如果您有一个包含多个柱形/列/线的数据集，则所有颜色都相同。然而，@Zeke Egherman的上面的答案将这些条形分别着以不同的颜色，因此更加灵活。虽然对于多个数据集，这种方式可以很好地工作，而且颜色选择看起来更漂亮。 - Robin Wilson

请查看此开放问题：“一个数据集，多个列/行都是相同的颜色＃11”（https://github.com/nagix/chartjs-plugin-colorschemes/issues/11） - Matthew Self

此插件不适用于自定义html图例。当调用legendCallback方法生成自定义html图例时，传递给函数的'chart'对象具有未定义的data.datasets backgroundColor数组。 - DARKVIDE

你知道Chart.js v1.x使用的配色方案叫什么名字吗？ - sureshvv

尝试在ng-charts中使用它，覆盖选项也无法正常工作。 - Alex Russell

9

我试图在charts.js 3+中使用这个插件，但是它不兼容。我花费的时间比我愿意承认的要长，可能我能帮助其他人节省一些时间。 - Matt Smith

4

为 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 或更高版本。

- Hemerson Varela

2

非常好的建议。我创建了一个 CodeSandbox 来展示结果，与另一个很棒的解决方案（“黄金角度”）在另一个答案中进行比较。 - OfirD

0

随机颜色的动态图表

当数据和标签是动态时

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

- ali mousavi

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- xnakos · Accepted Answer

我认为创建配色方案是一门完整的科学。对我来说，Chart.js没有包含这样的功能也许是因为有更重要的目标需要追求。

在文档中图表示例中使用的所有颜色都是明确定义的。而这个两个月前的问题中有一个来自Chart.js成员的分类响应，即Chart.js 2中没有默认颜色可用。

所以，你有三个选择。

第一选择是自己制作一些颜色。我猜你不会问这个问题，如果你已经做了这样的事情（我知道如果我做了这样的事情，结果会很糟糕）。

第二选择是在线寻找配色方案和配色方案生成器，并选择一些令你满意的配色方案。

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

有几个替代选择。一个很好的选择是Color Palette Generator，其采用非常宽松的许可证，并且可以在Chart.js 2 此处中看到它的实际应用。下面也提供了示例：

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色调色板：

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

结果是一个十六进制字符串数组（例如"eee8d5"）。为了在Chart.js期望颜色的地方使用它，您可以使用map将每个字符串前缀添加“#”，就像上面的示例一样。