Chart.jsのツールチップに文字列を入力するにはどうすればよいですか？
バクボグン
ツールチップの結果データに「％」記号を追加したいと思います。どのようにカスタマイズしますか？
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'pie',
data: {
labels: ['@lang('home/main.korea')', '@lang('home/main.japan')'],
datasets: [{
label: [
],
data: [
{!! $koreaPercent !!} ,
{!! $japanPercent !!} ,
],
backgroundColor: [
'red',
'blue',
],
}]
},
options: {
}
});
</script>
データ配列のオプションを変換する必要があると思います。
マテウスカブ
これは正しく機能するはずです：
チャートのキャンバスを作成します。
<canvas id="myChart"></canvas>
これは必要なjavascriptコードです：
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'pie',
data: {
labels: ["Green", "Blue", "Gray", "Purple", "Yellow", "Red", "Black"],
datasets: [{
backgroundColor: [
"#2ecc71",
"#3498db",
"#95a5a6",
"#9b59b6",
"#f1c40f",
"#e74c3c",
"#34495e"
],
data: [12, 19, 3, 17, 28, 24, 7]
}]
},
options: {
tooltips : {
callbacks : {
label : function(tooltipItem, data) {
var dataset = data.datasets[tooltipItem.datasetIndex];
return dataset.data[tooltipItem.index] + ' %';
},
},
},
}
});
そして、これは私が使用したCharts.jscdnです。
結果は次のとおりです。
これは動作するjsフィドルです。
それが役に立てば幸い。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
編集
関連記事
Related 関連記事
- 1
[MIXED CHART.JS]各チャートのツールチップのラベルを操作するにはどうすればよいですか？
- 2
モードでツールチップの外観を変更するにはどうすればよいですか：Chart.jsのインデックス
- 3
Chart.js折れ線グラフのツールチップをカスタマイズするにはどうすればよいですか？
- 4
Chart.jsドーナツチャートに2番目のラベルセットを表示するにはどうすればよいですか？
- 5
Chart.js 2.7.0グループ化された水平棒グラフ、グループ全体ではなく1つの棒のデータを表示するツールチップを取得するにはどうすればよいですか？
- 6
Chart.jsのy軸ラベルの横に入力ボックスを追加するにはどうすればよいですか？
- 7
Chart.jsドーナツグラフに2番目のラベルセットを追加するにはどうすればよいですか？
- 8
Python Altair Chart.save（file.html）によって生成されたAltairチャートのhtmlファイルにデフォルトのツールチップを表示するにはどうすればよいですか？
- 9
Chart.jsで軸の線/ルールを削除するにはどうすればよいですか？
- 10
chart.js（ドーナツチャート）へのリンクを追加するにはどうすればよいですか？
- 11
danielgindi / ChartsiosのLegendsof Pie Chartから静的文字列「DataSet」を削除するにはどうすればよいですか？
- 12
Chart.jsプラグインのデータラベルをng2-chartで使用するにはどうすればよいですか？
- 13
Chart.jsのラベルに新しい行を配置するにはどうすればよいですか？
- 14
外部JSONファイルからchart.jsグラフにデータをプロットするにはどうすればよいですか？
- 15
Chart.jsの中央に単一のデータを配置するにはどうすればよいですか？
- 16
react-chartjs-2 chart.js：ダグナットチャートのストローク幅を薄くするにはどうすればよいですか？
- 17
Chart.JSの新しいデータのみを更新するにはどうすればよいですか？
- 18
Chart.jsでY軸の値を数値から文字列に変更するにはどうすればよいですか？
- 19
Chart.jsで折れ線グラフデータセットのポイントラベルを表示するにはどうすればよいですか？
- 20
chart.jsドーナツグラフでマウスカーソルを変更するにはどうすればよいですか？
- 21
Chart.jsを使用してドーナツグラフの中央にテキストを追加するにはどうすればよいですか？
- 22
Chart.jsを使用して単一値のドーナツまたは円グラフを作成するにはどうすればよいですか？
- 23
Chart.jsのドーナツグラフで放射状CanvasGradientsを使用するにはどうすればよいですか？
- 24
Chart.jsのドーナツグラフで放射状CanvasGradientsを使用するにはどうすればよいですか？
- 25
Chart.js-タイトルを複数行で表示するにはどうすればよいですか？
- 26
Chart.JSをdiv内の中央に配置するにはどうすればよいですか？
- 27
Haskell Chartパッケージでチャートの背景色を設定するにはどうすればよいですか？
- 28
y軸がロックされた水平スクロールChart.js折れ線グラフを作成するにはどうすればよいですか？
- 29
JavaScript（Google Chart）内でAngular JSデータを使用するにはどうすればよいですか？
コメントを追加