我需要绘制一个能够根据不同柱子的数值配置不同颜色的柱状图，请问应该如何实现？-灵析社区
楠楠不难难我需要绘制一个柱状图，每个柱子能够根据不同的数据得到不同的颜色。请问应该如何实现？
0offer糕手可以使用 VChart 中配置柱子样式的回调来根据数据内容自定义颜色。
代码示例：
const spec = {
type: 'bar',
data: [
{
id: 'barData',
values: [
{ month: 'Monday', sales: 22 },
{ month: 'Tuesday', sales: 13 },
{ month: 'Wednesday', sales: 25 },
{ month: 'Thursday', sales: 29 },
{ month: 'Friday', sales: 38 }
]
}
],
xField: 'month',
yField: 'sales',
bar: {
style: {
fill: (datum) => {
return datum.sales > 25 ? 'red' : 'blue';
}
}
}
};
const vchart = new VChart(spec, { dom: CONTAINER_ID });
vchart.renderAsync();
// Just for the convenience of console debugging, DO NOT COPY!
window['vchart'] = vchart;
可以把代码放在 vchart 官网任何一个 demo 的 playground
里试一下，非常方便。比如下面地址就可以："https://www.visactor.io/vchart/demo/bar-chart/basic-column" (https://link.segmentfault.com/?enc=Ty%2BdkPTKP%2BNhniXTsZ3t7A%3D%3D.oYo6%2Bt4nbpNrceivXWQkhYD9K%2F1CnBqjilbH24axUWACniFEz4RMkfRQtsMXWx0WsiFqwvF%2BCq6nNZkh2gb0Kw%3D%3D)
图表效果：
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250107/944ee1059eb2781d457118b719410d65.png)
相关资源可参考：
github："https://github.com/VisActor/VChart" (https://link.segmentfault.com/?enc=tTHjl42dpZNBFCmQ59%2BvJQ%3D%3D.uOZELZhr0x1VcWADyJ7uH912qNRnG%2BXkRNx5HDYchjtX2mnFB9pD8VxuEnOHZDFB)
barChart style spec:
"https://www.visactor.io/vchart/option/barChart#bar.style.fill" (https://link.segmentfault.com/?enc=%2FzyYLVoHLJVlAswOZG%2FwJA%3D%3D.VcPoXfL41ZIaIt6xBW%2BxmqlDBPuYEZ4pwvJXGpzZZWPciCcUrWY7hktMXduCSMiQCCQwhwyX5bryYLf%2BhQg9eQ%3D%3D)