饼图和热图之间的自定义图表

Question

我们需要用ECChats创建一个时钟形式的 "堆图"，其中每小时有一定的出现次数（即值），饼上每个块的颜色根据值的相对权重从白到黑。

会是这样的。

有什么建议或例子吗？

Answer 1

这应该不难，使用 color 属性的图表选项中。

例如，数据来自 本例 从文档中获取。

我们可以使用以下代码为图表部分分配颜色。

const data = [
    {value: 335, name: '直接访问'},
    {value: 310, name: '邮件营销'},
    {value: 234, name: '联盟广告'},
    {value: 135, name: '视频广告'},
    {value: 1548, name: '搜索引擎'}
];

const max = data.reduce((acc, d) => acc < d.value ? d.value : acc, 0);
const colors = data.map(d => {
    const shade = 255 - Math.round(255 / (max / d.value));
    const hex = shade.toString(16)
    return '#' + hex + hex + hex
})

console.log(colors) // ["#c8c8c8", "#cccccc", "#d8d8d8", "#e9e9e9", "#000"]

// then you just assign the colors to the chart config
options.color = colors