在Chart.js中使用ChartKick时，Chart.js中图表的默认颜色定义在哪里？

s4n0splo 于 2023-10-18 发布在 Chart.js

关注(0)|答案(2)|浏览(165)

我使用Chart.js和ChartKick：
https://github.com/chartjs/Chart.js
https://github.com/ankane/chartkick.js
我找不到在他们的代码中为您添加的每个新行/数据集定义默认颜色的位置。例如，参见下面的图表：

有8行，我没有明确设置它们的颜色;它们是默认自动设置的。虽然我希望能够在另一个更复杂的图表中引用这些颜色，但我正在定义，以便我的颜色可以在所有图表中保持一致。
我已经搜索了github repo和文档（例如，https://www.chartjs.org/docs/latest/general/colors.html），但找不到东西。有谁知道它们的定义在哪里？

chart.js

来源：https://stackoverflow.com/questions/59526173/where-are-the-default-colors-for-charts-in-chart-js-defined-when-using-it-with-c

2条答案

按热度按时间

brccelvz1#

颜色是由Chartkick而不是Chart.js定义的。源

let defaultColors = [
  "#3366CC", "#DC3912", "#FF9900", "#109618", "#990099", "#3B3EAC", "#0099C6",
  "#DD4477", "#66AA00", "#B82E2E", "#316395", "#994499", "#22AA99", "#AAAA11",
  "#6633CC", "#E67300", "#8B0707", "#329262", "#5574A6", "#651067"
];

赞(0）回复(0）举报 2023-10-18

bweufnob2#

我没有使用Chartkick的经验，但这里有一个针对Chartjs的通用JS解决方案：

const x = [1,2,3,4,5]
let chart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: x,
        datasets: range(20).map(i => ({
            data: x,
        }))
    },
})

const rgbToHex = (r, g, b) => '#' + [r, g, b].map(x => {
    const hex = (x*1).toString(16)
    return hex.length === 1 ? '0' + hex : hex
}).join('')

let chartColors = chart.config._config.data.datasets.map(d => rgbToHex(...d.borderColor.slice(4,-1).split(", ")))
chartColors = Array.from(new Set(chartColors))

console.log(chartColors)

// ['#36a2eb', '#ff6384', '#ff9f40', '#ffcd56', '#4bc0c0', '#9966ff', '#c9cbcf']

赞(0）回复(0）举报 2023-10-18

我来回答

在Chart.js中使用ChartKick时，Chart.js中图表的默认颜色定义在哪里？

2条答案

相关问题

热门标签

最新问答