グラフにcssを適用させるために要素を指定したい

kintone カスタマイズ
2

F.m2451さん、こんにちは。

記載いただいた内容から、以下の状況と認識しています：

  • idが動的である
  • data属性をもとにスタイルを適用したい

認識に誤りがあれば、ご指摘ください。

まず、CSSでは、data属性（HTML上にある data- ではじまる属性）をもとにスタイルの指定をすることができません。

そのため、JavaScriptとCSSの両方を用いて、次のようにClassを追加したうえでスタイルを指定する必要があります。

▼ JavaScriptファイル

kintone.events.on('app.report.show', (event) => {
    if ( document.querySelector('[data-highcharts-chart="0"]') ) {
        const element = document.querySelector('[data-highcharts-chart="0"]');
        element.classList.add('my-original-style');
    }
});

▼ CSSファイル

.my-original-style {
    stroke-width: 3;
    stroke: rgb(102, 100, 100);
}

解説
JavaScriptファイルでは、グラフ画面が表示されたときに、data-highcharts-chart が 0 になっている要素を探して my-original-style というClassを追加しています。

CSSファイルでは、my-original-style というClassに対してスタイルを指定しています。

注意点
動作確認をしていないので、不具合などあれば詳細を添えてお知らせください。

「いいね！」 1