如何在Laravel+Highcharts中实现K线图多时间周期数据分组

Hey there! Let's tackle your three questions step by step, with practical examples tailored to your current setup:

1. 多时间周期数据的数据库设计建议 #

针对多周期K线数据，有两种常见的设计思路，你可以根据数据量和性能需求选择：

方案一：预计算存储多周期数据（推荐，适合中大型数据量） #

保留现有Sell表存储原始交易数据，扩展Price表来存储各时间周期的OHLC（开盘/最高/最低/收盘）数据，新增字段区分周期：

-- 修改后的Price表结构示例
Schema::create('prices', function (Blueprint $table) {
    $table->id();
    $table->enum('period', ['1min', '5min', '15min', '1h', '4h', '1d'])->comment('时间周期');
    $table->timestamp('period_start')->comment('周期起始时间');
    $table->decimal('openprice', 10, 2);
    $table->decimal('highprice', 10, 2);
    $table->decimal('lowprice', 10, 2);
    $table->decimal('closeprice', 10, 2);
    $table->timestamps();
    
    // 唯一索引：避免同一周期重复存储
    $table->unique(['period', 'period_start']);
});

逻辑说明：

• 通过Laravel定时任务（Artisan Command）或者实时触发，从Sell表中按周期聚合数据，计算每个周期的OHLC值，写入/更新Price表。
• 比如1分钟周期：将交易数据按每分钟的起始时间（如2024-05-20 14:35:00）分组，取该组第一条数据的价格为开盘价，最后一条为收盘价，最大值为最高价，最小值为最低价。

方案二：实时计算（适合小型数据量） #

如果数据量不大，可以不预存储多周期数据，而是在前端请求时，后端根据指定周期实时从Sell表聚合计算OHLC值。但这种方式在数据量大时性能会下降。

2. Highcharts是否可通过读取时间戳实现数据分组？ #

Absolutely! Highcharts的dataGrouping功能就是基于数据点的时间戳来自动分组聚合的。不过要注意：

• 前端分组适合数据量较小的场景，如果数据量过大会导致前端卡顿，此时更推荐后端预计算各周期数据。
• 前端分组时，Highcharts会自动根据你配置的units参数，将时间戳对应的原始数据聚合成指定周期的K线。

3. Highcharts dataGrouping 多周期配置示例 #

基于你现有的前端代码，修改dataGrouping配置，支持1分钟、5分钟、15分钟、1小时、4小时、1日的分组：

$(document).ready(function () {
  $('#container').highcharts('StockChart', {
    rangeSelector: {
      // 自定义周期选择按钮，对应dataGrouping的units
      buttons: [{
        type: 'minute',
        count: 1,
        text: '1M'
      }, {
        type: 'minute',
        count: 5,
        text: '5M'
      }, {
        type: 'minute',
        count: 15,
        text: '15M'
      }, {
        type: 'hour',
        count: 1,
        text: '1H'
      }, {
        type: 'hour',
        count: 4,
        text: '4H'
      }, {
        type: 'day',
        count: 1,
        text: '1D'
      }, {
        type: 'all',
        text: 'All'
      }],
      selected: 5 // 默认选中1日周期
    },
    plotOptions: {
      candlestick: {
        color: 'red',
        upColor: 'green'
      }
    },
    title: {
      text: 'CC Price'
    },
    series: [{
      type: 'candlestick',
      name: 'CC Price',
      // 这里传入预计算的对应周期数据（方案一）或原始交易数据（方案二）
      data: [
        <?php foreach($priceall as $price) { ?>
          [<?php echo strtotime($price['period_start']) * 1000; ?>, 
           <?php echo $price['openprice']; ?>,
           <?php echo $price['highprice']; ?>, 
           <?php echo $price['lowprice']; ?>,
           <?php echo $price['closeprice'] ?>],
        <?php } ?>
      ],
      dataGrouping: {
        enabled: true,
        // 配置支持的分组周期
        units: [
          ['minute', [1, 5, 15]], // 1/5/15分钟
          ['hour', [1, 4]], // 1/4小时
          ['day', [1]], // 1日
          ['week', [1]], // 可选扩展周周期
          ['month', [1]] // 可选扩展月周期
        ],
        // 自定义分组后的OHLC计算逻辑（默认Highcharts会自动处理，也可以自定义）
        approximation: function (groupedData) {
          let open = groupedData[0][1],
              high = -Infinity,
              low = Infinity,
              close = groupedData[groupedData.length - 1][4];
          
          groupedData.forEach(point => {
            if (point[2] > high) high = point[2];
            if (point[3] < low) low = point[3];
          });
          
          return [open, high, low, close];
        }
      }
    }]
  });
});

后端对应修改示例（生成1分钟周期数据） #

如果你选择方案一预存储数据，可以写一个Artisan命令来生成各周期数据，比如1分钟周期的计算逻辑：

<?php

namespace App\Console\Commands;

use Illuminate\Console\Command;
use App\Models\Sell;
use App\Models\Price;
use Carbon\Carbon;

class GenerateCandlestickData extends Command
{
    protected $signature = 'candlestick:generate {period}';
    protected $description = 'Generate OHLC data for specified period';

    public function handle()
    {
        $period = $this->argument('period');
        $interval = $this->getInterval($period); // 转换为Carbon的间隔字符串
        $startTime = Carbon::now()->subDays(7); // 生成最近7天的数据，可调整

        // 按周期分组原始交易数据
        $sellData = Sell::where('created_at', '>=', $startTime)
            ->get()
            ->groupBy(function ($item) use ($interval) {
                return Carbon::parse($item->created_at)->floor($interval)->toDateTimeString();
            });

        foreach ($sellData as $periodStart => $items) {
            $open = $items->first()->price;
            $close = $items->last()->price;
            $high = $items->max('price');
            $low = $items->min('price');

            // 写入或更新Price表
            Price::updateOrCreate(
                ['period' => $period, 'period_start' => $periodStart],
                [
                    'openprice' => $open,
                    'highprice' => $high,
                    'lowprice' => $low,
                    'closeprice' => $close,
                ]
            );
        }

        $this->info("Successfully generated {$period} candlestick data!");
    }

    private function getInterval(string $period): string
    {
        return match ($period) {
            '1min' => 'minute',
            '5min' => '5 minutes',
            '15min' => '15 minutes',
            '1h' => 'hour',
            '4h' => '4 hours',
            '1d' => 'day',
            default => throw new \InvalidArgumentException("Invalid period: {$period}"),
        };
    }
}

然后通过定时任务调度，每天/每小时执行这个命令来更新多周期数据。

内容的提问来源于stack exchange，提问作者koleo