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

更新：

颜色的传递方式有所不同。第一个例子是颜色数组，第二个例子是颜色数组。第二个很奇怪，但它来自这个答案 .

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

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

Answer 1

documentation 表明要设置背景颜色和轮廓颜色，您只提供一种颜色，因此它假设您指的是条形的轮廓。它将使用该颜色作为轮廓，然后使用与条形背景颜色相同颜色的淡出版本（更浅）。

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

Answer 2

由于 charts.js 中的条形图具有 borderColor 和 backgroundColor，您可以在数据集中自定义它们属性以获得与柱形图相同的结果，我说的是这样写：

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

并且因为您不希望它具有边框颜色并且希望它仅具有纯色背景色，所以在数据集选项中我建议您将每个条形的 borderWidth 设置为 0 并使用十六进制颜色的等效 RGBA阿尔法 1

Answer 3

一种解决方案是不提供 RGB HEX 值，而是将 RGBA HEX 值传递到颜色道具中。如果您这样做，您会发现无论您选择哪个渐变，两个图表都显示相同的颜色和渐变，因此颜色将相同。

为了便于使用，我在这个例子中将颜色放在一个单独的变量中：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>

chart.js 上显示的颜色不同

Differently displayed colors on chart.js

javascript

charts

chartkick