更改顶点图表中单条的颜色

Question

我在更改顶点图表中的颜色栏时遇到了一些麻烦。该图表是混合图表（折线图/条形图）。我想更改单个条形颜色。

我已经尝试过解决方案，即根据顶点图表文档将 fillColor 添加到 series.data 中，但它不起作用。

Chart Snap 在此处输入图像描述

这是我的代码。在哪里

response.device.data.values AND response.flowmeter.values 是一组值。

    if (newChart !== null) {

                newChart.destroy();

            }

            var options = {

                chart: {

                    height: 350,

                    stacked: false,

                    height: '400',

                    toolbar: {

                        tools: {

                            download: true,

                            selection: false,

                            zoom: false,

                            zoomin: false,

                            zoomout: false,

                            pan: false,

                            reset: false,

                            customIcons: []

                        }

                    }

                },

                dataLabels: {

                    enabled: false

                },

                stroke: {

                    width: [2, 1],

                    curve: 'stepline'

                },

                yaxis: [

                    {

                        axisTicks: {

                            show: true,

                        },

                        axisBorder: {

                            show: true,

                            color: '#008FFB'

                        },

                        labels: {

                            style: {

                                color: '#008FFB',

                            }

                        },

                        title: {

                            text: "<?=_('Device(s)')?> (m3)",

                            style: {

                                color: '#008FFB'

                            }

                        },

                 

                      

Answer 1

您可以在系列对象中设置颜色属性。像这样的东西：series: [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name: '<?=_('Device(s)')?>',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: 'line',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color: "00FA9A",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: response.device.data.values&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name: '<?=_('Flowmeter(s)')?>',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: 'bar',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color: "#F44336",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: response.flowmeter.values&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ],

Answer 2

colors: [function({ value, seriesIndex, w }) {&nbsp; return colors(value)}],&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;function colors(id) {&nbsp; var colors = [&nbsp; &nbsp; "#33b2df",&nbsp; &nbsp; "#546E7A",&nbsp; &nbsp; "#d4526e",&nbsp; &nbsp; "#13d8aa",&nbsp; &nbsp; "#A5978B",&nbsp; &nbsp; "#2b908f",&nbsp; &nbsp; "#f9a3a4",&nbsp; &nbsp; "#90ee7e",&nbsp; &nbsp; "#f48024",&nbsp; &nbsp; "#69d2e7"&nbsp; ];&nbsp; return colors[id] ?? '#33b2df';}

Answer 3

您可能会利用将函数传递给 fill 属性。检查此链接：https&nbsp;://apexcharts.com/docs/options/fill/ 。您还可以根据系列索引进行自定义。