Сделать гистограмму в ApexCharts.js

Я пытаюсь создать гистограмму с помощью ApexCharts (точнее, React-ApexCharts, но я не думаю, что это имеет значение).

Пример вывода, который мне нужен: Приведенный выше пример изначально был создан с использованием Chart.js (источник). Синяя заливка одной из полос не имеет значения.

Несмотря на то, что «гистограмма» указана как один из типов диаграмм в ApexCharts (ссылка), мне не удалось воспроизвести приведенный выше пример. Проблемы, которые я не могу решить:

Наличие number of bars + 1 количества меток по оси X (т. е. в приведенном выше примере 10 меток и 9 полос)
Расположение столбцов строго между метками
Наличие всплывающей подсказки, которая ссылается на соседние метки для каждого столбца (например, Hours: 6 - 7 выше)

Пример кода, где я застрял: https://codesandbox.io/s/dreamy-wiles-8mbp3e

javascript reactjs typescript histogram apexcharts

13.11.2022 10:47

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

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

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

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

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

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

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

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

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

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

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

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

207

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

Ответы 2

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

Что-то похожее на ваш образ и перечисленные вами требования можно установить так:

const yData = [5,8,24,16,32,42,30,17,11];
    const options = {
        chart: {
            type: 'bar'
        },
        series: [{
            name: 'visitors',
            data: Array.from({length: yData.length},
                (_, i)=>({
                    x: 0.5+i,
                    y: yData[i],
                    ... i === 4 ? ({fillColor: 'rgba(32, 120, 255, 0.4)', strokeColor: '#80afff'}) : ({})
                }))
        }],
        plotOptions:{
            bar: {
                columnWidth: "95%",
                strokeWidth: 2,
                borderRadius: 5,
                borderRadiusApplication: "end",
            }
        },
        fill:{
            colors: '#ff4040',
            opacity: 0.3,
        },
        stroke:{
            width: 2,
            colors: ['#ee8080']
        },
        dataLabels: {enabled: false},
        grid: {
            xaxis: {
                lines: {
                    show: true
                }
            },
            yaxis: {
                lines: {
                    show: true
                }
            }
        },
        xaxis: {
            type: "numeric",
            min: 0,
            max: yData.length,
            tickAmount: yData.length,
            labels: {formatter: x => x /*Math.round(x)*/},
            title: {text: "Hours", offsetY: 70},
            axisBorder: {
                color: "#000000"
            }
        },
        yaxis: {
            title: {text: "Visitors"},
            min: 0,
            max: Math.max(...yData),
            axisBorder: {
                show: true,
                color: "#000000"
            }
        },
        tooltip:{
            onDatasetHover: {
                highlightDataSeries: true,
            },
            x: {formatter: x=>{return 'Hours '+(x-0.5)+'-'+(x+0.5);}}
        }
    }

    const chart = new ApexCharts(document.querySelector("#chart"), options);

    chart.render();

<script src = "https://cdn.jsdelivr.net/npm/apexcharts"></script>
<div id = "chart" style = "border: 1px solid #444">
</div>

Если бы вы указали код Chart.js, можно было бы лучше понять все ваши требования.

Код Chart.js связан в ОП (копия ссылки)

— 13.11.2022 15:01

@swimmer Извините, я, должно быть, пропустил это или использовал раннюю версию вашего поста.

— 13.11.2022 15:04

Соответствует всем требованиям! Что я узнал: (1) для построения гистограммы в ApexCharts.js тип bar работает лучше, чем тип histogram; (2) передать как x, так и y данным series; (3) отделите xaxis от options, чтобы между делениями были полосы. Спасибо!

— 13.11.2022 15:37

13.11.2022 14:27

Адаптация принятого ответа @kikon в React-ApexCharts:

https://codesandbox.io/s/zealous-raman-02e7qk

import "./styles.css";
import Chart from "react-apexcharts";

export default function App() {
  const yData = [5, 8, 24, 16, 32, 42, 30, 17, 11];
  const series = [
    {
      name: "visitors",
      data: Array.from({ length: yData.length }, (_, i) => ({
        x: 0.5 + i,
        y: yData[i],
        ...(i === 4
          ? { fillColor: "rgba(32, 120, 255, 0.4)", strokeColor: "#80afff" }
          : {})
      }))
    }
  ];
  const options = {
    chart: {
      type: "bar"
    },
    plotOptions: {
      bar: {
        columnWidth: "95%",
        strokeWidth: 2,
        borderRadius: 5,
        borderRadiusApplication: "end"
      }
    },
    fill: {
      colors: "#ff4040",
      opacity: 0.3
    },
    stroke: {
      width: 2,
      colors: ["#ee8080"]
    },
    dataLabels: { enabled: false },
    grid: {
      xaxis: {
        lines: {
          show: true
        }
      },
      yaxis: {
        lines: {
          show: true
        }
      }
    },
    xaxis: {
      type: "numeric",
      min: 0,
      max: yData.length,
      tickAmount: yData.length,
      labels: { formatter: (x) => x /*Math.round(x)*/ },
      title: { text: "Hours", offsetY: 70 },
      axisBorder: {
        color: "#000000"
      }
    },
    yaxis: {
      title: { text: "Visitors" },
      min: 0,
      max: Math.max(...yData),
      axisBorder: {
        show: true,
        color: "#000000"
      }
    },
    tooltip: {
      onDatasetHover: {
        highlightDataSeries: true
      },
      x: {
        formatter: (x) => {
          return "Hours " + (x - 0.5) + "-" + (x + 0.5);
        }
      }
    }
  };
  return <Chart options = {options} series = {series} type = "bar" height = {260} />;
}

13.11.2022 15:37

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

Как изменить размер шрифта заголовка MUI Accordion

Как правильно синхронизировать хуки useEffect и useLocation в React с помощью React Router?

Тип TypeScript, представляющий собой список возможных строк, являющихся ключами объекта

Array.find() возвращает undefined, и я не могу понять, почему

Почему мой компонент не отображается, когда я передаю ему реквизиты (реагируют)?

Как сохранить данные API, которые не находятся в состоянии, с API контекста?

Как я могу использовать буфер, обрабатывать в приложении Vite?

Реагировать на открытие всплывающего окна определенного объекта при нажатии на объект

Пользовательский интерфейс материала MUI - Как сделать меню полной ширины?

Как сбросить диалог в реакции после закрытия

Сделать гистограмму в ApexCharts.js

Ответы 2

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

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