https://front.stockoption.cloud/assets/controllers/chart_controlle…2d031712a2cfd30e234d30a72c854bed8db2b6d5.js

1import {Controller} from "@hotwired/stimulus"
2import { Chart, registerables } from 'chart.js';
3Chart.register(...registerables);
4
5// CSP対応のための設定
6Chart.defaults.plugins.legend.labels.usePointStyle = false;
7
8export default class extends Controller {
9  static values = { data: Object, bgX: Number }
10
11  connect() {
12    const fill = {
13      beforeDraw(chart, args, options) {
14        const {ctx, chartArea: {left, top, right, bottom}, scales: {x, y}} = chart;
15        const midX = x.getPixelForValue(this.bgXValue); //2.5：棒グラフ左から3つ目と4つ目の間のx座標
16        const midY = y.getPixelForValue(0);　//0：値0のy座標
17        ctx.save();
18        //来年以降との区切り
19        ctx.fillStyle = "rgba(248, 249, 255, 1)";
20        ctx.fillRect(midX, top, right - midX, bottom - top);
21        ctx.fillStyle = "#D8D8DC";
22        ctx.fillRect(midX, top, 1, bottom - top);
23        //0線
24        ctx.fillStyle = "#D8D8DC";
25        ctx.fillRect(left, midY, right - left, 1);
26        ctx.restore();
27      }
28    }
29    this.chart = new Chart(this.element.getContext('2d'), {
30      type: 'bar',
31      data: this.dataValue,
32      options: {
33        responsive: true,
34        maintainAspectRatio: false,
35        // interaction: {
36        //   mode: 'index',
37        //   intersect: false,
38        // },
39        animation: {
40          onComplete: function() {
41            // CSP対応: アニメーション完了後の処理
42          }
43        },
44        plugins: {
45          legend: {
46            labels: {
47              boxWidth: 14,
48              boxHeidht: 14,
49              usePointStyle: false,
50              font: {
51                size: 12
52              }
53            }
54          }
55        },
56        scales: {
57          x: {
58            stacked: true,
59            ticks: {
60              color: "#393B4D",
61              font: {
62                size: 15,
63                weight: 700
64              }
65            },
66            border: {
67              display: false,
68            },
69            grid: {
70              display: false
71            }
72          },
73          y:{
74            // type: 'linear',
75            // display: true,
76            // position: 'left',
77            ticks: {
78              color: "#393B4D",
79              font: {
80                size: 12
81              }
82            },
83            border: {
84              display: false,
85              dash: [3, 3]
86            },
87            grid: {
88              color: "#D8D8DC",
89              dashOffset: [3, 3],
90              tickColor: "#fff"
91            }
92          },
93          // y1: {
94          //   type: 'linear',
95          //   display: true,
96          //   position: 'right',
97          //   ticks: {
98          //     color: "#393B4D",
99          //     font: {
100          //       size: 12
101          //     }
102          //   },
103          //   border: {
104          //     display: false,
105          //   },
106          //   grid: {
107          //     drawOnChartArea: false,
108          //   },
109          // },
110        },
111      },
112      plugins: [fill]
113    })
114  }
115
116  disconnect() {
117    this.chart.destroy()
118    this.chart = undefined
119  }
120};