使用自定义Tailwind颜色名称作为chart.js backgroundColor图表的输入

0ejtzxu1 于 2022-11-06 发布在 Chart.js

关注(0)|答案(1)|浏览(205)

我尝试在react-chartjs-2中使用命名空间data.datasets.backgroundColor中的tailwind.config.js中定义的自定义颜色名称作为圆环图组件。但是，它不起作用。有没有什么方法可以让我轻松使用Tailwind名称，而不必使用它们的十六进制值？
仅供参考，它与十六进制值完美地工作，但我只是想知道是否有一种方法，只是使用顺风名称。
在tailwind.config.js中定义的自定义颜色：

cc1: '#0099CC',
cc2: '#ED1A37',

我的chart.js data变量：

const data = {
    labels: ...
    datasets: [
      {
        data: ...
        backgroundColor: ['cc1', 'cc2']
        offset: ...
      },
    ],
  };

// backgroundColor is invalid

chart.js

来源：https://stackoverflow.com/questions/73384596/use-custom-tailwind-color-names-as-inputs-to-chart-js-backgroundcolor-of-chart

1条答案

按热度按时间

kiayqfof1#

您需要导入"tailwindcss/colors"，然后使用colors.something

import colors from "tailwindcss/colors";

  const data = {
  labels: ...
  datasets: [
    {
      data: ...
      backgroundColor: [colors.zinc[200], colors.primary[500], colors.gray[800]]
      offset: ...
    },
   ],
 };

// backgroundColor is invalid

示例tailwind.config.js

theme: {
    colors: {
        transparent: 'transparent',
        current: 'currentColor',
        black: colors.black,
        blue: colors.blue,
        orange: colors.orange,
        amber: colors.amber,
        lime: colors.lime,
        white: colors.white,
        gray: colors.gray,
        zinc: colors.zinc,
        indigo: colors.indigo,
        green: colors.emerald,
        red: colors.rose,
        yellow: colors.amber,
        sky: colors.sky,
        slate: colors.slate,
        neutral: colors.neutral,
        stone: colors.stone,
        darkblue: {
            "50": "#DBE2FF",
            "100": "#BDC9FF",
            "200": "#7A93FF",
            "300": "#3358FF",
            "400": "#002CF0",
            "500": "#0020AD",
            "600": "#00198A",
            "700": "#001366",
            "800": "#000D47",
            "900": "#000724"
        },
        cream: {
            "50": "#E3EEF2",
            "100": "#CBDFE7",
            "200": "#93BDCD",
            "300": "#5a5a5a",
            "400": "#4a4a4a",
            "500": "#303030",
            "600": "#242424",
            "700": "#232323",
            "800": "#191919",
            "900": "#131313"
        }
    },

赞(0）回复(0）举报 2022-11-06

我来回答

使用自定义Tailwind颜色名称作为chart.js backgroundColor图表的输入

1条答案

相关问题

热门标签

最新问答