使用ApexCharts.js制作直方图

Question

我正在尝试使用ApexCharts（更具体地说，是React-ApexCharts）创建直方图，但我认为这没有什么区别。

我想要的输出示例： 上面的示例最初是使用Chart.js创建的（source）。其中一个条形图的蓝色阴影不相关。

即使“直方图”被列为ApexCharts中的一种图表类型（reference），我也无法重现上面的示例。我无法解决的问题包括：

• 在x轴上有柱数+1个标签（例如，在上面的示例中有10个标签和9个柱）
• 将柱严格定位在标签之间
• 每个柱的工具提示引用相邻标签（例如上面的小时：6-7）

我卡住的示例代码：https://codesandbox.io/s/dreamy-wiles-8mbp3e

- swimmer

Answer 1

与您所提供的图像和要求相似的内容，可以通过以下方式设置：

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代码，您将更好地了解所有要求。

- kikon

---

Chart.js的代码已经在OP中链接（链接副本）。 - swimmer

@swimmer 抱歉，我可能错过了它，或者使用了您的帖子的早期版本。 - kikon

满足所有要求！我学到了：（1）在ApexCharts.js中构建直方图，键入“bar”比键入“histogram”更好；（2）将“x”和“y”都传递给“series”数据；（3）解耦“选项”中的“xaxis”，使条形图位于刻度之间。谢谢！ - swimmer

Answer 2

这是一篇关于React-ApexCharts的答案，参考了@kikon的观点：

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} />;
}

- swimmer