Изменить цвет отдельной полосы на вершине диаграммы - PullRequest
0 голосов
/ 05 августа 2020

У меня проблемы с изменением цвета полосы на диаграмме вершин. График представляет собой смешанный график (линия / столбец). Я хочу изменить цвет одной полосы.

Я пробовал решение, которое состоит в том, чтобы добавить fillColor в series.data в соответствии с документами диаграммы вершины, но это не работает.

Chart Snap введите описание изображения здесь

Вот мой код. где

response.device.data.values ​​И 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();
...