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

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: [

                {

                    name: '<?=_('Device(s)')?>',

                    type: 'line',

                    color: "00FA9A",

                    data: response.device.data.values

                },

                {

                    name: '<?=_('Flowmeter(s)')?>',

                    type: 'bar',

                    color: "#F44336",

                    data: response.flowmeter.values

                }

            ],

Answer 2

colors: [function({ value, seriesIndex, w }) {

  return colors(value)

}],

    

    

function colors(id) {

  var colors = [

    "#33b2df",

    "#546E7A",

    "#d4526e",

    "#13d8aa",

    "#A5978B",

    "#2b908f",

    "#f9a3a4",

    "#90ee7e",

    "#f48024",

    "#69d2e7"

  ];

  return colors[id] ?? '#33b2df';

}

Answer 3

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