回答:
遅い編集:2.7.0+
これを行うためのChart.jsの公式プラグインがあります:https : //github.com/chartjs/chartjs-plugin-datalabels
元の答え:
あなたはAnimationComplete上のポイント/バーをループして値を表示することができます
プレビュー
HTML
<canvas id="myChart1" height="300" width="500"></canvas>
<canvas id="myChart2" height="300" width="500"></canvas>
脚本
var chartData = {
labels: ["January", "February", "March", "April", "May", "June"],
datasets: [
{
fillColor: "#79D1CF",
strokeColor: "#79D1CF",
data: [60, 80, 81, 56, 55, 40]
}
]
};
var ctx = document.getElementById("myChart1").getContext("2d");
var myLine = new Chart(ctx).Line(chartData, {
showTooltips: false,
onAnimationComplete: function () {
var ctx = this.chart.ctx;
ctx.font = this.scale.font;
ctx.fillStyle = this.scale.textColor
ctx.textAlign = "center";
ctx.textBaseline = "bottom";
this.datasets.forEach(function (dataset) {
dataset.points.forEach(function (points) {
ctx.fillText(points.value, points.x, points.y - 10);
});
})
}
});
var ctx = document.getElementById("myChart2").getContext("2d");
var myBar = new Chart(ctx).Bar(chartData, {
showTooltips: false,
onAnimationComplete: function () {
var ctx = this.chart.ctx;
ctx.font = this.scale.font;
ctx.fillStyle = this.scale.textColor
ctx.textAlign = "center";
ctx.textBaseline = "bottom";
this.datasets.forEach(function (dataset) {
dataset.bars.forEach(function (bar) {
ctx.fillText(bar.value, bar.x, bar.y - 5);
});
})
}
});
onComplete
ここではコールバックを使用しましたが、マウスオーバーがチャートのバーの上にあるときにも発生し、再描画のために数値が点滅しonAnimationComplete
ます。私は私の既存のチャートのコードで、このコールバックを使用することができません(参照var chartBar
下部にpastebin.com/tT7yTkGh)
ここにChart.js 2.3の更新バージョンがあります
2016年9月23日:線/棒タイプの両方でv2.3で動作するようにコードを編集しました。
重要:アニメーションが必要ない場合でも、期間オプションを0に変更しないでください。変更すると、chartInstance.controllerが未定義のエラーになります。
var chartData = {
labels: ["January", "February", "March", "April", "May", "June"],
datasets: [
{
fillColor: "#79D1CF",
strokeColor: "#79D1CF",
data: [60, 80, 81, 56, 55, 40]
}
]
};
var opt = {
events: false,
tooltips: {
enabled: false
},
hover: {
animationDuration: 0
},
animation: {
duration: 1,
onComplete: function () {
var chartInstance = this.chart,
ctx = chartInstance.ctx;
ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
this.data.datasets.forEach(function (dataset, i) {
var meta = chartInstance.controller.getDatasetMeta(i);
meta.data.forEach(function (bar, index) {
var data = dataset.data[index];
ctx.fillText(data, bar._model.x, bar._model.y - 5);
});
});
}
}
};
var ctx = document.getElementById("Chart1"),
myLineChart = new Chart(ctx, {
type: 'bar',
data: chartData,
options: opt
});
<canvas id="myChart1" height="300" width="500"></canvas>
このアニメーションオプションは、棒グラフの2.1.3で機能します。
少し変更された@Ross回答
animation: {
duration: 0,
onComplete: function () {
// render the value of the chart above the bar
var ctx = this.chart.ctx;
ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, 'normal', Chart.defaults.global.defaultFontFamily);
ctx.fillStyle = this.chart.config.options.defaultFontColor;
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
this.data.datasets.forEach(function (dataset) {
for (var i = 0; i < dataset.data.length; i++) {
var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model;
ctx.fillText(dataset.data[i], model.x, model.y - 5);
}
});
}}
hover: {animationDuration: 0}
、ホバー時にアニメーションが
.filter(dataset => !dataset._meta[0].hidden)
chartJS v2.xでこれを行うための最も良いオプションはプラグインを使用することです。そのため、オプションに大きなコードブロックはありません。さらに、バーの上にカーソルを置いたときにデータが消えないようにします。
つまり、チャートが描画された後にテキストを追加するプラグインを登録するこのコードを単に使用します。
Chart.pluginService.register({
afterDraw: function(chartInstance) {
var ctx = chartInstance.chart.ctx;
// render the value of the chart above the bar
ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, 'normal', Chart.defaults.global.defaultFontFamily);
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
chartInstance.data.datasets.forEach(function (dataset) {
for (var i = 0; i < dataset.data.length; i++) {
var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model;
ctx.fillText(dataset.data[i], model.x, model.y - 2);
}
});
}
});
Chart.defaults.global.tooltips.enabled = false;
。そのソリューションの問題は、afterDraw
関数が何百回も呼び出され、おそらくCPUオーバーヘッドを生成することです。それでも、まばたきのない今のところ唯一の答えです。horizontalBar
グラフのレンダリングを改善する必要がある場合は、ctx.textAlign = 'left'; ctx.textBaseline = 'middle';
およびを使用してくださいctx.fillText(dataset.data[i], model.x+5, model.y);
。
Chart.js 2.0以降に対する@Rossの回答に基づいて、バーの高さがスケールの境界に近づきすぎた場合に備えて、少し微調整を加える必要がありました。
animation
棒グラフのオプションの属性:
animation: {
duration: 500,
easing: "easeOutQuart",
onComplete: function () {
var ctx = this.chart.ctx;
ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily);
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
this.data.datasets.forEach(function (dataset) {
for (var i = 0; i < dataset.data.length; i++) {
var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model,
scale_max = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._yScale.maxHeight;
ctx.fillStyle = '#444';
var y_pos = model.y - 5;
// Make sure data value does not get overflown and hidden
// when the bar's value is too close to max value of scale
// Note: The y value is reverse, it counts from top down
if ((scale_max - model.y) / scale_max >= 0.93)
y_pos = model.y + 20;
ctx.fillText(dataset.data[i], model.x, y_pos);
}
});
}
}
ctx.save()
最後に電話をかけてみましたが、うまく
onComplete
私はこれはと同じでblink.Wouldに再描画&テキストが表示されますが発生するバーの上で推移したときに、コールバックが実行されonAnimationComplete
、私が使用することができませんか。だけでなくonAnimationComplete
、私の既存のコード(参照して、コールバックをvar chartBar
の下部にペーストビン。 com / tT7yTkGh
プラグインchartjs-plugin-datalabelsを使用している場合、次のコードオプションオブジェクトが役立ちます
import 'chartjs-plugin-datalabels';
typescriptファイルにインポートするか<script src="chartjs-plugin-datalabels.js"></script>
、javascriptファイルに参照を追加してください。
options: {
maintainAspectRatio: false,
responsive: true,
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
}
}]
},
plugins: {
datalabels: {
anchor: 'end',
align: 'top',
formatter: Math.round,
font: {
weight: 'bold'
}
}
}
}
この良い答えに従って、棒グラフに次のオプションを使用します。
var chartOptions = {
animation: false,
responsive : true,
tooltipTemplate: "<%= value %>",
tooltipFillColor: "rgba(0,0,0,0)",
tooltipFontColor: "#444",
tooltipEvents: [],
tooltipCaretSize: 0,
onAnimationComplete: function()
{
this.showTooltip(this.datasets[0].bars, true);
}
};
window.myBar = new Chart(ctx1).Bar(chartData, chartOptions);
これはまだツールチップシステムと彼の利点(自動配置、テンプレートなど)を使用していますが、装飾(背景色、キャレットなど)を非表示にしています
this.datasets[0].points
代わりです.bars
。ツールチップシステムを使用するため、私はこのソリューションを好みます。
onComplete
コールバックでポタトピーリングとファントランの回答を使用しましたが、チャートのバーの上にホバーしたときにもトリガーされ、テキストが再描画されて不要な点滅効果が発生します。私も試しましafterDraw
たが、すべて同じです。 potatopeelingsによって提供されるフィドルでは発生しません。
chart.jsサンプルから(ファイルChart.js-2.4.0 / samples / data_labelling.html):
`` `//データラベルを提供するプラグインを定義する
Chart.plugins.register({
afterDatasetsDraw: function(chartInstance, easing) {
// To only draw at the end of animation, check for easing === 1
var ctx = chartInstance.chart.ctx;
chartInstance.data.datasets.forEach(function (dataset, i) {
var meta = chartInstance.getDatasetMeta(i);
if (!meta.hidden) {
meta.data.forEach(function(element, index) {
// Draw the text in black, with the specified font
ctx.fillStyle = 'rgb(0, 0, 0)';
var fontSize = 16;
var fontStyle = 'normal';
var fontFamily = 'Helvetica Neue';
ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily);
// Just naively convert to string for now
var dataString = dataset.data[index].toString();
// Make sure alignment settings are correct
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
var padding = 5;
var position = element.tooltipPosition();
ctx.fillText(dataString, position.x, position.y - (fontSize / 2) - padding);
});
}
});
}
});
「」
このプラグインの使用をお勧めします:https : //github.com/chartjs/chartjs-plugin-datalabels
プラグインをjsファイルにインポートするだけで、ラベルをチャートに追加できます。例:
import 'chartjs-plugin-datalabels'
そして、これらのドキュメントを使用して微調整することができます:https : //chartjs-plugin-datalabels.netlify.com/options.html
@ajhuddyの回答を少し編集しました。棒グラフのみ。私のバージョンは追加します:
欠点:内部に値があるバーの上にカーソルを置くと、値が少しギザギザに見えることがあります。ホバー効果を無効にするソリューションが見つかりません。独自の設定によっては、微調整が必要になる場合もあります。
構成:
bar: {
tooltips: {
enabled: false
},
hover: {
animationDuration: 0
},
animation: {
onComplete: function() {
this.chart.controller.draw();
drawValue(this, 1);
},
onProgress: function(state) {
var animation = state.animationObject;
drawValue(this, animation.currentStep / animation.numSteps);
}
}
}
ヘルパー:
// Font color for values inside the bar
var insideFontColor = '255,255,255';
// Font color for values above the bar
var outsideFontColor = '0,0,0';
// How close to the top edge bar can be before the value is put inside it
var topThreshold = 20;
var modifyCtx = function(ctx) {
ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, 'normal', Chart.defaults.global.defaultFontFamily);
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
return ctx;
};
var fadeIn = function(ctx, obj, x, y, black, step) {
var ctx = modifyCtx(ctx);
var alpha = 0;
ctx.fillStyle = black ? 'rgba(' + outsideFontColor + ',' + step + ')' : 'rgba(' + insideFontColor + ',' + step + ')';
ctx.fillText(obj, x, y);
};
var drawValue = function(context, step) {
var ctx = context.chart.ctx;
context.data.datasets.forEach(function (dataset) {
for (var i = 0; i < dataset.data.length; i++) {
var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model;
var textY = (model.y > topThreshold) ? model.y - 3 : model.y + 20;
fadeIn(ctx, dataset.data[i], model.x, textY, model.y > topThreshold, step);
}
});
};
calculateTickRotation
で何かを見つけました。これは、Scale関数の内部にあります。分析します。
私の経験では、chartjs-plugin-datalabelsプラグインを含めると(<script>
ページのchart.jsタグの後ろにタグを配置してください)、グラフに値が表示され始めます。
次に選択する場合は、ニーズに合わせてカスタマイズできます。カスタマイズはここに明確に文書化されていますが、基本的に、形式は次の架空の例のようになります。
var myBarChart = new Chart(ctx, {
type: 'bar',
data: yourDataObject,
options: {
// other options
plugins: {
datalabels: {
anchor :'end',
align :'top',
// and if you need to format how the value is displayed...
formatter: function(value, context) {
return GetValueFormatted(value);
}
}
}
}
});