5

以下の画像のように、ChartJs (最新バージョン) でデータ値またはインデックス ラベルを表示する方法:

ここに画像の説明を入力

ChartJs を使用して、React プロジェクトでチャートを表示しています。これを除いて、すべてが正常に機能しています。

私はstackoverflow（ https://stackoverflow.com/a/31632707 ）で答えを見つけましたが、古いバージョンのchartjsを使用しており、私が使用しているものでは機能していません。

私のChartJsコード:

var ctx = document.getElementById("myChart");

var BarChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["Jan","Feb","March"],
        datasets: [{
            label: "Chart Data",
            data: [10,20,15],
            backgroundColor: "red",
            borderColor: "green",
            borderWidth: 1
        }]
    },
    options: {
        legend: {
            display: false
        },
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }],
            xAxes: [{
                ticks: {
                    maxRotation: 180
                }
            }]
        }
    }
});

関数を使用して追加しようとしました: ctx.fillText(bar.value, bar.x, bar.y - 5);、しかし、その表示.fillText is not a function

4

2 に答える 2

3

いくつかの調査の結果、動作するようになりました。

onCompleteアニメーションのイベント後に設定する必要があります。バーの x、y 値は、子のモデル (ポイント、ライン、バーなど) に格納されます。

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++) {
                            console
                        var model = dataset._meta[0].dataset._children[i]._model;
                        ctx.fillText(dataset.data[i], model.x, model.y - 5);
                    }
                });               
            }

少し構造が変わっただけです。

この作業中の JSFiddleで確認できます

于 2016-07-13T10:38:22.470 に答える