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

【问题标题】：Change color of single bar in apex chart更改顶点图表中单条的颜色
【发布时间】：2020-11-25 07:48:15
【问题描述】：

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

我尝试过的解决方案是根据顶点图表文档在 series.data 中添加一个填充颜色，但它不起作用。

这是我的代码。在哪里

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'
                            }
                        },
                        tooltip: {
                            enabled: true
                        }
                    },
                    {
                        opposite: true,
                        axisTicks: {
                            show: true,
                        },
                        axisBorder: {
                            show: true,
                            color: '#00E396'
                        },
                        labels: {
                            style: {
                                color: '#00E396',
                            }
                        },
                        title: {
                            text: "<?=_('Flowmeter(s)')?> (m3)",
                            style: {
                                color: '#00E396',
                            }
                        }
                    },
                ],
                tooltip: {
                    followCursor: true,
                },
                legend: {
                    horizontalAlign: 'center',
                    offsetX: 40
                },
                zoom: {
                    enabled: false
                },
                
                xaxis: {
                    categories: response.device.data.labels,
                    labels: {
                        style: {
                            fontSize: '10px'
                        }
                    }
                },
                series: [
                    {
                        name: '<?=_('Device(s)')?>',
                        type: 'line',
                        data: response.device.data.values
                    },
                    {
                        name: '<?=_('Flowmeter(s)')?>',
                        type: 'bar',
                        data: response.flowmeter.values
                    }
                ],
                
            };

            newChart = new ApexCharts(document.querySelector("#new-chart"), options);
            newChart.render();

【问题讨论】：

如果你制作一个实时的 Codesandbox 示例，可能会更容易测试和调试 :)

标签： javascript jquery charts bar-chart apexcharts

【解决方案1】：

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

【讨论】：

【解决方案2】：

您可以在系列的对象中设置颜色道具。类似的东西：

series: [
                {
                    name: '<?=_('Device(s)')?>',
                    type: 'line',
                    color: "00FA9A",
                    data: response.device.data.values
                },
                {
                    name: '<?=_('Flowmeter(s)')?>',
                    type: 'bar',
                    color: "#F44336",
                    data: response.flowmeter.values
                }
            ],

【讨论】：