如果选择日期时间类型,则面积图不显示数据

问题描述 投票:0回答:1

我正在尝试使用 Apex Chart 显示数据,如果其唯一的 DATE 类型,该图表可以动态正常工作。当我使用日期范围搜索(动态切换到 DATETIME)来查询数据库时,AREA 图表不显示图表,而仅在您将鼠标悬停在图表上时显示数字,另一方面,如果我将类型更改为 BAR,则效果很好。

可能出了什么问题?我缺少什么? 请参阅此处所附的图片 enter image description here 这是我单击“查看源代码”时的结果。它显示数据可用,但视觉效果未显示

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>

javascript php apexcharts
1个回答
0
投票

感谢这里的帮助,我能够得到解决方案。问题是我在几个月的搜索查询内循环 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);
    }
© www.soinside.com 2019 - 2024. All rights reserved.