我正在尝试使用 Apex Chart 显示数据,如果其唯一的 DATE 类型,该图表可以动态正常工作。当我使用日期范围搜索(动态切换到 DATETIME)来查询数据库时,AREA 图表不显示图表,而仅在您将鼠标悬停在图表上时显示数字,另一方面,如果我将类型更改为 BAR,则效果很好。
可能出了什么问题?我缺少什么? 请参阅此处所附的图片 这是我单击“查看源代码”时的结果。它显示数据可用,但视觉效果未显示
var options = {
series: [{
name: "Value1 Label",
data: ["330.00", "0.00", "0.00"]
},
{
name: "Value2 Label",
data: ["310.00", "0.00", "0.00"]
},
{
name: "Value3 Label",
data: ["230.00", "0.00", "0.00"]
},
{
name: "Value4 Label",
data: ["320.00", "0.00", "0.00"]
},
{
name: "Value5 Label",
data: ["330.00", "0.00", "0.00"]
},
{
name: "Value6 Label",
data: ["320.00", "0.00", "0.00"]
}
],
chart: {
height: 350,
stacked: true,
type: 'area'
},
dataLabels: {
enabled: false
},
colors: ['#3078AF', '#AF3080', '#3C8337', '#A25267', '#EFA1EC', 'grey'],
stroke: {
curve: "smooth",
lineCap: "round",
width: 0
},
fill: {
type: "solid"
},
xaxis: {
type: "datetime",
categories: ["2024-03-01", "2024-03-02", "2024-03-03"],
labels: {
style: {
//colors: colors.mutedColor,
cssClass: "text-muted",
//fontFamily: base.defaultFontFamily
}
},
},
yaxis: {
labels: {
style: {
//colors: colors.mutedColor,
cssClass: "text-muted",
//fontFamily: base.defaultFontFamily
}
},
},
legend: {
position: "bottom",
horizontalAlign: 'center',
//fontFamily: base.defaultFontFamily,
fontWeight: 400,
labels: {
//colors: colors.mutedColor
},
},
tooltip: {
x: {
format: 'dd/MM/yy HH:mm'
},
},
};
var chart = new ApexCharts(document.querySelector("#areaChart"), options);
chart.render();
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<br/>
<br/>
<div id="areaChart"></div>
感谢这里的帮助,我能够得到解决方案。问题是我在几个月的搜索查询内循环 DATERANGE 搜索查询。 我的最终答案看起来像这样
if(!empty($from_date) || !empty($to_date)) {
// Date Range Query here
array_push($values, number_format( sprintf( '%.2f', $values), 2, '.', '' ));
}
else{
for( $m = 1; $m <= 12; $m++ ) {
// search based on months query.
array_push($values, number_format( sprintf( '%.2f', $values), 2, '.', '' ));
// $num = str_pad( $m, 2, 0, STR_PAD_LEFT );
// $month = date('M', mktime(0, 0, 0, $m, 1));
array_push($months, $month);
}
}
if(!empty($from_date) || !empty($to_date)) {
// $months = json_encode($dateRangeArray);
}
else{
// $months = json_encode($months);
}