Chart.js 上不同显示的颜色

Question

我通过 Chartkick-vue 将相同的颜色传递给 Chart.js，但它们的显示方式不同。为什么？

<column-chart

  :data="votesData"

  height="200px"

  :colors="[['#28a745', '#007bff', '#ffc107', '#dc3545']]"

>

</column-chart>

<bar-chart

  :data="chartData"

  suffix="%"

  height="100px"

  :colors="['#28a745', '#007bff', '#ffc107', '#dc3545']"

  :stacked="true"

  :library="{ options: { tooltips: false } }"

>

更新：

颜色传递方式存在差异。第一个示例是颜色数组，第二个示例是颜色数组的数组。第二个很奇怪，但它来自这个答案https://stackoverflow.com/a/61139231/1639556。

我有另一张具有相同症状的图表：

<column-chart :data="chartData" :colors="['#007bff', '#28a745']" height="200px">

Answer 1

解决方案是将 RGBA 十六进制值传递到 color 属性中，而不是给出 RGB 十六进制值。如果执行此操作，您会发现无论选择哪种渐变，两个图表都显示相同的颜色和渐变，因此颜色将相同。为了便于使用，我在此示例中将颜色放入单独的变量中：https://codesandbox.io/s/immutable-worker-3qxgj<template>&nbsp; <div class="hello">&nbsp; &nbsp; <column-chart :data="votesData" height="200px" :colors="[colors]">&nbsp; &nbsp; </column-chart>&nbsp; &nbsp; <bar-chart&nbsp; &nbsp; &nbsp; :data="chartData"&nbsp; &nbsp; &nbsp; suffix="%"&nbsp; &nbsp; &nbsp; height="100px"&nbsp; &nbsp; &nbsp; :colors="colors"&nbsp; &nbsp; &nbsp; :stacked="true"&nbsp; &nbsp; &nbsp; :library="{ options: { tooltips: false } }"&nbsp; &nbsp; >&nbsp; &nbsp; </bar-chart>&nbsp; &nbsp; <line-chart :data="data" :colors="colors" />&nbsp; &nbsp; <bar-chart&nbsp; &nbsp; &nbsp; :colors="colors"&nbsp; &nbsp; &nbsp; :data="booksData"&nbsp; &nbsp; &nbsp; suffix="%"&nbsp; &nbsp; &nbsp; height="200px"&nbsp; &nbsp; &nbsp; :stacked="true"&nbsp; &nbsp; ></bar-chart>&nbsp; </div></template><script>export default {&nbsp; name: "HelloWorld",&nbsp; props: {&nbsp; &nbsp; msg: String,&nbsp; },&nbsp; data() {&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; colors: ["#28a745ff", "#007bffff", "#ffc107ff", "#dc3545ff"],&nbsp; &nbsp; };&nbsp; },};</script>

Answer 2

由于charts.js中的条形图具有borderColor和backgroundColor，您可以在数据集属性中自定义它们以获得与柱形图相同的结果，我正在谈论这样的编写：&nbsp; &nbsp; let chartData = {labels: ['Neni problem','Branalita', 'Vadi me to', 'Vas...'], datasets: [&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; backgroundColor: 'rgba(40, 167, 69, 1)',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; borderWidth: 0,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: 40&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;...&nbsp; &nbsp; &nbsp; &nbsp; }];<bar-chart&nbsp; :data="chartData"&nbsp; suffix="%"&nbsp; height="100px"&nbsp; :stacked="true"&nbsp; :library="{ options: { tooltips: false } }">并且因为您不希望它具有边框颜色并且希望它仅具有纯色背景颜色，所以在数据集选项中，我建议您将每个条形的 borderWidth 设置为 0 并使用与 alpha 1 相同的十六进制颜色的 RGBA

Answer 3

文档显示，需要设置背景颜色和轮廓颜色，您只给出一种颜色，因此假设您指的是条形的轮廓。它将使用该颜色作为轮廓，然后使用与条形背景颜色相同颜色的淡出版本（较浅）。尝试同时使用背景和轮廓颜色，或者简单地删除轮廓并随后为每个条解析一种颜色。