グラフの指定した数値の線のみ太線に変更したいため、こちらで質問させていただき
#highcharts-2 path[d=“M 62 111.5 L 790 111.5”] {
stroke-width: 3;
stroke: rgb(102, 100, 100);
}
というcssを指定したのですが、「#highcharts-2」の数字の部分が自動で変わってしまうので、うまく線が変更されないことがありました。
そのため、代わりに数値が変更されていないと思われる、画像の上から6行目の一番右側の「data-highcharts-chart=“0”」を指定したいのですがそのまま指定すると適用されませんでした。
data-highcharts-chart=“0” path[d=“M 62 111.5 L 790 111.5”] {
stroke-width: 3;
stroke: rgb(102, 100, 100);
}
ここを指定したい場合はどのようにcssを書いたらよいのでしょうか。
よろしくお願いいたします。
F.m2451さん、こんにちは。
記載いただいた内容から、以下の状況と認識しています：
認識に誤りがあれば、ご指摘ください。
まず、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に対してスタイルを指定しています。
注意点
動作確認をしていないので、不具合などあれば詳細を添えてお知らせください。
だいちゃん様
早速ご教授いただきありがとうございます。
状況おっしゃる通りでごいます。
data属性はcssにそのまま指定することはできないのですね。
教えていただいた通りにjavascriptでクラスを追加してから、cssで指定しましたが、適用されていないようです。
検証ツールで見てもエラーもでていないようです。
他に確認するポイントなどございますでしょうか。
よろしくお願いいたします。
追記
説明が抜けており申し訳ございません。
グラフについてはポータル画面に貼り付けてあり、ポータル画面で太線を表示させたいと考えております。
教えていただいた「‘app.report.show’」の部分を「‘portal.show’」に変えてみましたが、太線は表示できませんでした。
他にも変更部分がありましたら、教えていただけますと幸いです。
よろしくお願いいたします。
F.m2451さん、早速のご確認ありがとうございます！
ポータル画面に表示したグラフだったのですね！
それでは、該当のJavaScriptファイルとCSSファイルは、「kintoneシステム管理」の「全体カスタマイズ」として指定する必要がありますが、こちら問題ないでしょうか？
また、検証ツール上で Ctrl + F を押下し、追加したClass（前述のプログラム例だと my-original-style ）を検索してみて、別の要素に当たってないか確認していただけますでしょうか。
実際の動作確認ができておらず恐縮ですが、ご確認のほどよろしくお願いいたします。。。
だいちゃん様
ありがとうございます。
javascriptとcssを指定する場所は問題なかったようなのですが、下記のように指定することで反映することができました。
[data-highcharts-chart=“0”] path[d=“M 62 111.5 L 790 111.5”] {
stroke-width: 3;
stroke: rgb(102, 100, 100);
}
data要素が特別な扱いが必要なことなど大変勉強になりました。
ありがとうございました。
このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。