我正在尝试使用 ApexCharts 创建直方图（更具体地说，React-ApexCharts，但我认为这没有什么区别）。
Example of the output I'm after:
The example above was originally created using Chart.js (source https://leimao.github.io/blog/JavaScript-ChartJS-Histogram/). The blue shading for one of the bars is irrelevant.
尽管“直方图”被列为 ApexCharts 中的图表类型之一（参考 https://apexcharts.com/docs/options/chart/type/），我无法重现上面的例子。我无法解决的问题是：
number of bars + 1x 轴上的标签数量（即上面的示例中有 10 个标签和 9 个条形）Hours: 6 - 7 above)我陷入困境的示例代码：https://codesandbox.io/s/dreamy-wiles-8mbp3e https://codesandbox.io/s/dreamy-wiles-8mbp3e
类似于您的图像以及您列出的要求可以这样设置：
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代码，人们会更好地理解您的所有需求。