ant-design-charts 对带缩略轴柱状图 根据数据自定义列处理， 以颜色为例

本文主要是介绍ant-design-charts 对带缩略轴柱状图 根据数据自定义列处理， 以颜色为例，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

摘要

本文主要对ant-design-charts中带缩略柱状图进行自定义列处理
ant-design-charts版本：1.4.2

1、定义数据

const data1 = [{"a": "七台河","b": 52827.32,'c': 2},{"a": "万县","b": 20000,'c': 1},
]

2、自定义列

当需要对柱状图的列进行自定义处理时，可以用color属性，style属性，columStyle属性等
通过对每一列对应的数据对象进行分析，来进行自定义处理，但是以上属性只包含x轴，y轴对应的属性

如果需要依赖x轴，y轴对应的属性以外的属性进行判断时，可以用seriesField将该属性加入到数据中，增加属性。

const config = {data: data1,xField: 'a',yField: 'b',xAxis: {label: {autoRotate: false,},},///差异性seriesField:'c',columnStyle: (originData) => {console.log(originData);if (originData.c > 0) {return {fill: 'red',}}return {fill: 'bule',fillOpacity: 0.5,stroke: 'black',lineWidth: 1,lineDash: [4, 5],strokeOpacity: 0.7,shadowColor: 'black',shadowBlur: 10,shadowOffsetX: 5,shadowOffsetY: 5,cursor: 'pointer'}},slider: {start: 0.1,end: 0.2,},};

打印结果

color属性

{a: '七台河'}

color属性+seriesField属性

{c: 2}

columStyle属性

{a: '七台河'}

columStyle属性+seriesField属性

{a: '七台河', b: 52827.32, c: 2}

3、 组件中使用

<Column {...config} ref={chartRef} />

这篇关于ant-design-charts 对带缩略轴柱状图 根据数据自定义列处理， 以颜色为例的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---