iMind Developers Blog

iMind開発者ブログ

javascript

chart.jsの円グラフのラベルを線で指して表示する

概要 chart.jsの円グラフのラベルを線をびーっと引いてその先に表示するようにしてみたい。 完成図 バージョン情報 chart.js 2.8.0 chartjs-plugin-piechart-outlabels 1.1.2 通常の円グラフ まずは最低限のコードで円グラフを生成。 <html> <head> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.css"/> </link></head></html>

chart.jsの円グラフの中に値を表示する

概要 chart.jsで作った円グラフのグラフ内にパーセンテージを表示するようにする。 完成図 バージョン情報 chart.js 2.8.0 chartjs-plugin-datalabels 0.6.0 通常の円グラフ まずは最低限のコードで円グラフを生成。 <html> <head> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.css"/> </link></head></html>

chart.jsでグラフ上に任意の画像を表示する

概要 chart.jsのグラフの上に任意の部分に画像を表示したかった。 バージョン情報 chart.js 2.8.0 動作確認ブラウザ Firefox 67.0 Chromium 75.0 作成する画面 みんな大嫌いなPie Chartで中央に黒い太陽の絵を置いてみる。下記のようなイメージ。 ただのPie …