Chart.jsはカスタムタイトル、サブタイトル、グラフィックを追加します
アーメド
プロジェクトにChart.jsを使用しています（http://www.chartjs.org/）。
タイトルやカスタム画像の追加、チャートへの「マージン」の追加など、実際のキャンバスに新しいものを描画する方法を誰かが知っていますか？
ブランド
はい。
ChartJsのonAnimationCompleteコールバックを設定して、ChartJsが独自の描画とアニメーション化を完了したときに、カスタム描画コードを呼び出すことができます。
そのコールバックでは、canvas context（== ChartJSに最初に入力したものと同じキャンバス/コンテキスト）を取得し、そのコンテキストを使用して、必要な新しいカスタムコンテンツを描画できます。
仕組みの例を次に示します。
ChartJSには、チャートコンテンツへのネイティブな「パディング」がありません。パディングを取得する1つの方法は、グラフを小さいメモリ内キャンバスに描画してから、そのメモリ内キャンバスをオフセットを使用して表示可能なキャンバスに描画し、目的のパディングを可能にすることです。
次に例を示します。
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
var pieData = [
{
value: 200,
color:"#F7464A",
highlight: "#FF5A5E",
label: "Red"
},
{
value: 50,
color: "#46BFBD",
highlight: "#5AD3D1",
label: "Green"
},
{
value: 100,
color: "#FDB45C",
highlight: "#FFC870",
label: "Yellow"
},
{
value: 40,
color: "#949FB1",
highlight: "#A8B3C5",
label: "Grey"
},
{
value: 120,
color: "#4D5360",
highlight: "#616774",
label: "Dark Grey"
}
];
// create an in-memory canvas (c)
var c = document.createElement("canvas");
// size it to your desired size (without padding)
c.width=100;
c.height=100;
// make it hidden
c.style.visibility='hidden';
document.body.appendChild(c);
// create the chart on the in-memory canvas
var cctx = c.getContext("2d");
window.myPie = new Chart(cctx).Pie(pieData,{
responsive:false,
animation:false,
// when the chart is fully drawn,
// draw the in-memory chart to the visible chart
// allowing for your desired padding
// (this example pads 100 width and 50 height
onAnimationComplete:function(){
ctx.drawImage(c,100,50);
ctx.fillText('Space to add something here with 50x100 padding',5,20);
ctx.fillText('Added Padding',5,90);
ctx.beginPath();
ctx.moveTo(0,100);
ctx.lineTo(100,100);
ctx.stroke();
}
});body{ background-color: ivory; }
canvas{border:1px solid red;}<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<canvas id="canvas" width=300 height=300></canvas>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
編集
関連記事
Related 関連記事
- 1
chart.jsのツールチップにカスタムタイトルを追加する
- 2
Chart.jsのタイトルカラーボックスを削除する方法
- 3
バブルグラフ（Chart.JS）のポイントの下にデータラベルを配置します
- 4
Chart.jsは、グラフの各データポイントのラベルを変更します
- 5
Chart.jsデータセットにサフィックスを追加しますか？
- 6
Chart.jsとカスタムスクリプトを使用して、デフォルトでデータセットを非表示にします
- 7
Chart.jsのトラブルシューティングのカスタマイズ
- 8
バブルグラフ（Chart.js）のポイントにラベルを追加します
- 9
バブルグラフ（Chart.js）のポイントにラベルを追加します
- 10
タイムストリングからChart.jsを使用してラップタイムをプロットします
- 11
Chart.jsでグラフのタイトル、x軸とy軸の名前を設定しますか？
- 12
データをグループ化するためのスイッチ/ラジオボタンを備えたChart.js棒グラフ/棒の色のトラブルシューティング
- 13
chart.js棒グラフをリアルタイムで更新
- 14
Chart.js 2.0ドーナツグラフのツールチップをカスタマイズする方法
- 15
chart.js棒グラフのツールチップをカスタマイズする
- 16
Chart.js V2：ツールチップラベルにプレフィックスまたはサフィックスを追加します
- 17
Chart.js-タイムスケールデータセットでupdate（）を使用
- 18
chart.jsのカスタムフィルターチャート
- 19
Chart.js-円グラフセグメントをクリックして折れ線グラフにデータを追加します
- 20
リアルタイムデータのchart.jsで水平スクロールを一時停止します
- 21
Chart.jsで折れ線グラフデータセットのポイントラベルを表示するにはどうすればよいですか？
- 22
Chart.js折れ線グラフのツールチップをカスタマイズするにはどうすればよいですか？
- 23
Chart.js：積み上げ棒グラフに常に表示されるカスタムツールチップを表示します
- 24
チャートプロパティのイベントロードでchart.renderer.textを使用して、デフォルトのツールチップと同等のカスタムツールチップをマウスオーバーに配置する方法
- 25
外部JSONファイルからchart.jsグラフにデータをプロットするにはどうすればよいですか？
- 26
JavaScript Chart.js-ツールチップに表示するカスタムデータフォーマット
- 27
Chart.jsにカスタムデータスケールを追加する
- 28
スタックはChartまたはChart-cairoを見つけることができませんが、cabalファイルはそれらを要求します
- 29
私はChart.jsで棒グラフの各列には、JavaScriptを使用して、クリックイベントを追加しようとしています
コメントを追加