chart.js 上不同的显示颜色答案

【问题标题】：Differently displayed colors on chart.jschart.js 上不同的显示颜色
【发布时间】：2020-11-12 20:17:19
【问题描述】：

我通过 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">

【问题讨论】：

标签： javascript charts chartkick

【解决方案1】：

解决方案是将 RGBA HEX 值传递给颜色属性，而不是提供 RGB 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>

【讨论】：

Lee，我很好奇这个问题是来自于 chartjs 还是 wrapper？ github.com/literakl/mezinamiridici/issues/101代码沙箱中可以看到。
它来自包装器，我在项目中使用库本身，并且必须手动添加 alpha 以使其透明。你可以看到我曾经为一个问题制作的这个例子，我只通过了 RGB 十六进制，它显示了全彩色：codepen.io/leelenaleee/pen/VwjgNGw。此外，如果您查看 Chart.js 提供的示例的源代码，您会发现它们自己添加了透明度，因为默认情况下它显示正常的全彩色。
Chart.js 唯一一次为条形图显示透明背景色是当您不指定背景色时，它将默认所有条形图为透明的灰色背景
我的意思是将灰色弹出窗口切成两半的问题。 user-images.githubusercontent.com/6383287/…
猜猜这是一个内部问题，尽管它可能已在即将发布的库版本 3 的主要版本中得到修复。 stackoverflow.com/questions/44497200/…

【解决方案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 } }"
>

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

【讨论】：

【解决方案3】：

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

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

【讨论】：