メニュー

【Laravel】QuickChartの修正

  • 投稿日
  • 著者 ひがし
  • カテゴリー Laravel

タスク表のグラフ画像が小さくなってたのと、ラベルが出力されなくなってた。今は応急処置済み。
GitHubからのLaravelパッケージのセキュリティ勧告のおかげもあって改修に乗り出せた。セキュリティ勧告ありがたいね、GitHubに突っ込こんではその辺お任せしよう()

QuickChartのリポジトリを確認すると、以下のような案内が。

Chart.js versions
Chart.js v3 and v4 are supported via the version parameter (documentation to read more about parameters). Custom chart plugins such as annotations and outlabels currently not available for >= 3.0.0.

【Google翻訳】
チャート.jsバージョン チャート.js v3 と v4 は、version パラメーターを介してサポートされています (パラメーターの詳細については、ドキュメントを参照してください)。注釈やアウトラベルなどのカスタムチャートプラグインは、現在>= 3.0.0では使用できません。

GitHub – typpo/quickchart: Chart image and QR code web API

使ってたのがoutlabeledPieなので、これは代案で進めていこうと。

Laravelでは以下のようにカスタマイズ。

$chart = new \QuickChart([
  'width' => 700,
  'height' => 400,
  'version' => '2',
]);

$chart->setConfig('{
  type: "pie",
  data: {
    labels: [ "' . implode( '","',$titleArr ) . '" ],
    datasets: [
      {
        backgroundColor: [ "' . implode( '","',$colorArr ) . '" ],
        data: [' . implode( ",",$countArr ) . '],
        borderWidth: 2,
      },
    ]
  },
  options: {
    legend: {
      position: "right",
      labels: {
        fontSize: 20,
        fontFamily: "Hiragino Kaku Gothic ProN",
        fontColor: "black",
        padding: 20
      }
    },
    plugins: {
      datalabels: {
        display: true,
        font: {
          style: "bold",
          size: 20,
          family: "Hiragino Kaku Gothic ProN",
        },
        color: "white"
      }
    }
  }
}');

フォントを変えてみたり、数字を入れてみたり、線を太くしてみたり。
コンソールでヒントが出てたり、サンドボックスで何ができるかを試せたりするので、もうちょっとやりたいことがあれば弄ってみるかも。

QuickChart