如何在highchart中按月顯示多個數據集？

Question

我有一個名為 sales 的數據庫，我試圖像這樣在我的圖表中顯示但不能。

ID	產品	收益	創建時間
1個	Jasmine	50	2023-01-14 18:55:34
2個	怎么做菜	150	2023-01-14 18:55:34
3個	Jasmine	100	2023-01-14 18:55:34
4個	字典	200	2023-01-14 18:55:34
5個	怎么做菜	70	2023-02-20 17:23:54

這是我第一次嘗試在圖表中執行此操作並嘗試了教程中的其他代碼並最終得到了這個結果

我試圖像第一個圖表一樣顯示它，但不是按月顯示多個數據集，其中月份將包含產品名稱及其當月的收入。 像這樣

請原諒我難看的編輯

這是我設法遵循並執行的工作代碼，但不知道如何修改它以獲得所需的 output。我試過但出現錯誤，所以我把它放回去了。

        $now = Carbon::now();
        $yr = $now->format('Y/m/d');

       //monthly
        {
            $m= $now->format('m');
            $date_start = Carbon::create(date('Y'), "1");//january start
            $data=[];
            $monthdata=[];
            $x=0;
                
            for ($month = $m;  $x <= 7; $month++)
            {
                $x=$x+1;
                $date = Carbon::create(date('Y'), $month);
                $date_end = $date->copy()->endOfMonth();
            
                $saledate = DB::table('sales')
                ->select(DB::raw('sum(earnings) as sale'))
                ->where('created_at', '>=', $date)
                ->where('created_at', '<=', $date_end)
                ->get();
    
                $sum=0;
                foreach ($saledate as $row)
                {
                    $sum=$row->sale;
                }
                array_push($data,$sum);
                array_push($monthdata,$date->format('M'));
            
            }

            $saleChart1= new UserChart;
            $saleChart1->labels($monthdata);
            $saleChart1->dataset('Sales', 'bar',$data )->options([
                'color' => '#2596be',
            ]);
        }

在我的刀片文件中，

        <div class="col-lg-6 mb-5">
            <div class="card card card-raised h-100  ">
                <div class="card-header text-dark bg-success px-4" style="background-color:#198754 !important">
                    <i class="fas fa-chart-area me-1 text-white"></i>
                    Monthly Sales 
                </div>
                <div class="card-body bg-white">
                        <div class="col-lg-12 " >
                            <div id="myAreaChart1" class="mt-4" style="height: 300px;">  
                            {!! $saleChart1->container() !!}                                
                            <script src=https://cdnjs.cloudflare.com/ajax/libs/echarts/4.0.2/echarts-en.min.js charset=utf-8></script>
                            {!! $saleChart1->script() !!}
                            </div>
                        </div>
                </div>
              
            </div>
        </div>

我的用戶圖表 class，

<?php

namespace App\Charts;

use ConsoleTVs\Charts\Classes\Chartjs\Chart;

class UserChart extends Chart
{
    /**
     * Initializes the chart.
     *
     * @return void
     */
    public function __construct()
    {
        parent::__construct();
    }
}

        

請幫忙，找不到其他教程，我現在找到的都是餅圖和折線圖，顯示方式與我要找的不一樣。 我應該怎么做才能達到所需的 output？

Answer 1

似乎ConsoleTVs\Charts\Classes\Chartjs\Chart沒有這種能力。 但是，您可以讓ConsoleTVs\Charts\Classes\Echarts\Chart更接近您的需要。

如果我是你，我會將你的 UserChart class 更改為

<?php

namespace App\Charts;

use ConsoleTVs\Charts\Classes\Echart\Chart;

class UserChart extends Chart
{
    /**
     * Initializes the chart.
     *
     * @return void
     */
    public function __construct()
    {
        parent::__construct();
    }
}

然后使用https://echarts.apache.org/examples/en/editor.html?c=bar-label-rotation中的示例，您應該能夠將數據塑造成正確的格式。

似乎大部分設置都被推入了一個option數組。 其中一些你可以在 class 本身看到https://github.com/ConsoleTVs/Charts/blob/main/src/Classes/Echarts/Chart.php

您應該能夠使用$saleChart1->options([//...]);設置選項

快樂編碼:-)