chart.js上显示的颜色不同

问题描述

我通过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','#dc3545']"
  :stacked="true"
  :library="{ options: { tooltips: false } }"
>

更新：

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

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

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

解决方法

一种解决方案是，不给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>

documentation显示同时设置背景色和轮廓色，您仅给出一种颜色，因此假定您是指条形的轮廓。它将使用该颜色绘制轮廓，然后使用淡出的版本（更浅），其颜色与条形的背景颜色相同。

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

由于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，并使用与alpha相等的十六进制颜色RGBA 1

chartkick charts javascript