Laravel 8 ConsoleTvs 7 - 通过 advancedDataset 方法的额外参数应用数据集配置

Question

我正在使用内置后端 advancedDataset 方法将我的数据发送到 ConsoleTvs 7 Chartisan 图表的前端。作为第三个参数，我决定以数组数据类型发送额外的数据集配置：

// Example of extra info data that forms part of chartData return
$data['extra'] = ['type' => 'line', 'fill' => false, 'borderColor' => '#FF6F6F', 'backgroundColor' => '#FF6F6F', 'hidden' => true,
                                'datalabels' => ['display' => true], 'borderDash' => [5, 5]];

//--> within handler method
public function handler(Request $request): Chartisan
{
    $data = $this->chartData($request);  // Trait method chartData return

    $chart = Chartisan::build()
        ->labels($data["labels"]);
    
    foreach ($data['dataset'] as $key => $values) {
        $chart->advancedDataset($values['legend'], $values['data'], $values['extra']);
     //                                                                    ^
     //-----------------------------  -------------------------------------| extra arg
    }

    return $chart;
}

此额外值未应用于数据集配置。事实上，如果我删除 ChartisanHooks.datasets(...[ configurations ]...) 方法，图表会呈现其默认条形图。

如何将额外的数据集配置应用到前端，而不必诉诸双重工作？是否缺少我的设置或如何访问 extra 参数？

Laravel 8
Chart.js v2.9.4
chartjs-plugin-datalabels v1.0.0

Answer 1

终于在不那么晦涩的地方找到了答案Chartisan documentation。
前端const hooks = new ChartisanHooks()实例的custom()方法包含3个hook参数即：

hooks.custom(({ data, merge, server }) => {
  // data ->   Contains the current chart configuration
  //           data that will be passed to the chart instance.
  // merge ->  Contains a function that can be called to merge
  //           two javascript objects and returns its merge.
  // server -> Contains the server information in case you need
  //           to acces the raw information provided by the server.
  //           This is mostly used to access the `extra` field.

  // ...

  // The function must always return the new chart configuration.
  return data
})

恰当命名的 server 键包含一个 datasets 键，该键由一组对象组成，其中一个键名为 extra 即

server.datasets[0].extra // all array key : values passed from server

万岁！

因此，要访问此 extra 键：值，我将它们传递给前端 hooks.custom() 方法 data.datasets[0] 对象或创建新对象，例如

const chart = new Chartisan({
  el: '#test_chart',
  hooks: new ChartisanHooks()
    .colors()
    .custom(function({ data, merge, server }) { // server param

     //---> loop through extra from server
     for (let i = 0; i < server.datasets.length; i++) {
         const extras = server.datasets[i].extra; // extra object
         for (const [key, value] of Object.entries(extras)) { // loop through extras
             data.data.datasets[i][key] = value; // add extras to data
         }
                    
     }
      return merge(data, { // merge data
        options: {
          layout: {
            padding: {
              left: 0,
              right: 0,
              top: 50,
              bottom: 0
            },
          },
          aspectRatio: 1,
          maintainAspectRatio: false,
          responsive: true,
          legend: {
            display: true,
            position: 'top',
            labels: {
              usePointStyle: true,
              fontSize: 12,
            },
          },
          elements: {
            point: {
              pointStyle: 'circle',
            }
          },
          scales: {
            xAxes: [{
              maxBarThickness: 120,
              scaleLabel: {
                display: true,
                labelString: "xAxes_label"
              },
              gridLines: {
                display: false
              },
              ticks: {
                fontSize: 10,
                maxRotation: 80,
                minRotation: 80,
                padding: 2
              },
            }],
            yAxes: [{
              scaleLabel: {
                display: true,
                labelString: "yAxes_label"
              },
              gridLines: {
                display: false,
                drawBorder: false
              },
              ticks: {
                display: true,
                fontSize: 10,
                suggestedMin: 0
              },
            }],
          },
          plugins: {
            datalabels: {
              color: '#ff0a6c',
              labels: {
                title: {
                  font: {
                    weight: 'bold',
                    size: 11,
                  }
                },
                value: {
                  color: 'green'
                }
              },
              formatter: function(value, context) {
                return (value != '' && value !== undefined) ? Math.round(value * 100) / 100 : value;
              },
              anchor: 'end',
              align: 'start',
              display: 'auto',
              clamp: false
            }
          }
        }
      });
    }),
});

当然这很粗糙，需要检查客户端是否支持其中的一些方法。此外还需要 server.datasets[i].extra !== null、object[key] !== undefined 等检查。

这当然使后端更加动态。问题是，作为后端安全包的 ConsoleTvs 包是否已经失效 Laravel 并且它是否仍受到其开发人员的支持。

Laravel 8 ConsoleTvs 7 - 通过 advancedDataset 方法的额外参数应用数据集配置

Laravel 8 ConsoleTvs 7 - Apply dataset configuration through extra argument of advancedDataset method

javascript

package

chart.js2

laravel-8