Гистограмма Apexchart только окрашивает границу

У меня есть эта гистограмма. Я пытался сделать каждую полосу разного цвета, но окрашена только граница. Как я могу сделать полную полосу в этом цвете?

Я пытался использовать distributed: true, но это только окрашивало границы.

window.Apex = {
        chart: {
            foreColor: '#ccc',
            toolbar: {
                show: false
            },
        },
        stroke: {
            width: 2,
        },
        dataLabels: {
            enabled: false
        },
        tooltip: {
            theme: 'dark'
        },
        grid: {
            borderColor: "#535A6C",
            xaxis: {
                lines: {
                    show: true
                }
            }
        }
    };
var optionsBar = {
        chart: {
            height: 280,
            type: 'bar'
        },
        plotOptions: {
            bar: {
                columnWidth: '18%',
                horizontal: true,
                distributed: true
            },
        },
        colors: ['red', 'orange', 'green', 'orange', 'red'],
        dataLabels: {
            enabled: true,
        },
        series: [{
            name: 'mmol/L',
            data: [14, 25, 50, 10, 1],
        }],
        xaxis: {
            categories: ['> 14.0', '10 - 14.0', '4 - 10', '4 - 3.8', '< 3.8'],
        },
        fill: {
            colors: ['red', 'orange', 'green', 'orange', 'red'],
            type: 'solid',
            opacity: 1
        }

    }

    var chartBar = new ApexCharts(
        document.querySelector("#barchart"),
        optionsBar
    );

    chartBar.render();

body {
  background: #343E59;
  color: #777;
  font-family: Montserrat, Arial, sans-serif;
}

.body-bg {
  background: #F3F4FA !important;
}

.content-area {
  margin: 0 auto;
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/apexcharts/3.6.12/apexcharts.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/apexcharts/3.6.12/apexcharts.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.slim.min.js"></script>
<div id = "barchart"></div>

javascript colors bar-chart apexcharts

14.09.2022 11:33

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

174

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Исправлено, добавив цвета к каждому объекту данных

{
  x: '4 - 10',
  y: 54,
  fillColor: '#1fc900'
}

window.Apex = {
        chart: {
            foreColor: '#ccc',
            toolbar: {
                show: false
            },
        },
    
        dataLabels: {
            enabled: false
        },
        tooltip: {
            theme: 'dark'
        },
        grid: {
            borderColor: "#535A6C",
            xaxis: {
                lines: {
                    show: true
                }
            }
        }
    };
var optionsBar = {
        chart: {
            height: 280,
            type: 'bar'
        },
        plotOptions: {
            bar: {
                columnWidth: '18%',
                horizontal: true,
                distributed: true,
              
            },
        },
        
        dataLabels: {
            enabled: true,
        },
        series: [{
            name: 'mmol/L',
            data: [{
        x: '> 14.0',
        y: 54,
        fillColor: '#FF0000'
    }, {
        x: '10 - 14.0',
        y: 66,
        fillColor: '#ff6a00'
    },
    {
        x: '4 - 10',
        y: 54,
        fillColor: '#1fc900'
    }, {
        x: '4 - 3.8',
        y: 66,
        fillColor: '#ff6a00'
    },
    {
        x: '< 3.8',
        y: 66,
        fillColor: '#FF0000'
    }],
            
        }],
        xaxis: {
            categories: ['> 14.0', '10 - 14.0', '4 - 10', '4 - 3.8', '< 3.8'],
        },
        fill: {
            opacity: 1
        }

    }

    var chartBar = new ApexCharts(
        document.querySelector("#barchart"),
        optionsBar
    );

    chartBar.render();

body {
  background: #343E59;
  color: #777;
  font-family: Montserrat, Arial, sans-serif;
}

.body-bg {
  background: #F3F4FA !important;
}

.content-area {
  margin: 0 auto;
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/apexcharts/3.6.12/apexcharts.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/apexcharts/3.6.12/apexcharts.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.slim.min.js"></script>
<div id = "barchart"></div>

14.09.2022 15:06

Другие вопросы по теме

Как сделать настраиваемое цветовое меню для приложения флаттера?

Изменение цвета зависит от значений даты

WPF TextBox меняет цвет фона текста, а не всего TextBox

Построить многоцветную линию с x в качестве даты и времени и изменить цвет на y

Matplotlib\Seaborn неправильные цвета в данных с плавающей запятой с пользовательской картой цветов

Обратная легенда в geom_contour

Укажите цвета на ящичковой диаграмме Овод (Джулия)

Как написать это предложение правильно JS

Цветовая палитра, которая работает в цвете и в оттенках серого?

Python - средний цвет части изображения

Гистограмма Apexchart только окрашивает границу

Ответы 1

Другие вопросы по теме

Похожие вопросы