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值传递到颜色属性中，而不是给出RGBA值。如果这样做，您可以看到，无论选择哪个梯度，两个图表都显示相同的颜色和梯度，因此颜色将是相同的。

为了便于使用，我在本例中将颜色放在一个单独的变量中：https://codesandbox.io/s/immutable-worker-3qxgj

<template>
  <div class="hello">
    <column-chart :data="votesData" height="200px" :colors="[colors]">
    </column-chart>
    <bar-chart
      :data="chartData"
      suffix="%"
      height="100px"
      :colors="colors"
      :stacked="true"
      :library="{ options: { tooltips: false } }"
    >
    </bar-chart>
    <line-chart :data="data" :colors="colors" />
    <bar-chart
      :colors="colors"
      :data="booksData"
      suffix="%"
      height="200px"
      :stacked="true"
    ></bar-chart>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data() {
    return {
      colors: ["#28a745ff", "#007bffff", "#ffc107ff", "#dc3545ff"],
    };
  },
};
</script>

Answer 2

由于charts.js中的条形图具有borderColor和backgroundColor，因此您可以在dataset属性中对它们进行自定义，以获得与柱状图相同的结果，我正在讨论的内容如下：

    let chartData = {labels: ['Neni problem','Branalita', 'Vadi me to', 'Vas...'], datasets: [
        {
          backgroundColor: 'rgba(40, 167, 69, 1)',
          borderWidth: 0,
          data: 40
        }
         ,
         ...
        }];

<bar-chart
  :data="chartData"
  suffix="%"
  height="100px"
  :stacked="true"
  :library="{ options: { tooltips: false } }"
>

因为您不希望它具有边框颜色，并且希望它只具有纯色背景颜色，所以我建议您在dataset选项中将每个条形图的borderWidth设置为0，并将十六进制颜色的RGBA设置为alpha 1

Answer 3

documentation显示了要设置的背景和轮廓颜色，您只给出了一种颜色，因此它假定您指的是条形图的轮廓。它将对轮廓使用该颜色，然后使用与条形图背景颜色相同的淡出版本(更亮)。

尝试同时使用背景和轮廓颜色，或者简单地删除轮廓并在此之后为每个条形图解析一种颜色。