Chart.js에 데이터 값을 표시하는 방법

Chart.js에 데이터 값을 표시하는 방법

Chart.js를 이용하여 데이터 값을 표시할 수 있습니까?

그래프를 인쇄하고 싶습니다.

어떤 조언이든 감사합니다.

Chart.js 2.7.0+를 위한 공식 플러그인이 있습니다: 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);
            });
        })
    }
});

---

Fiddle - http://jsfiddle.net/uh9vw0ao/

이는 선/바 유형을 모두 포함하여 Chart.js 2.3에 적용됩니다.

중요:애니메이션이 필요하지 않더라도 듀레이션 옵션을 0으로 변경하지 마십시오.그렇지 않으면 chartInstance.controller is undefined error가 발생합니다.

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>

플러그인 chartjs-plugin-datalabels를 사용하는 경우 다음 코드 옵션 개체가 도움이 됩니다.

가져오는지 확인합니다.import ChartDataLabels from 'chartjs-plugin-datalabels';당신의 TypeScript 파일에 또는 참조를 추가합니다.<script src="chartjs-plugin-datalabels.js"></script>javascript 파일에서 ChartJS.register(ChartDataLabels)를 사용하여 플러그인을 등록합니다.

options: {
    maintainAspectRatio: false,
    responsive: true,
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero: true,
            }
        }]
    },
    plugins: {
        datalabels: {
            anchor: 'end',
            align: 'top',
            formatter: Math.round,
            font: {
                weight: 'bold'
            }
        }
    }
}

이 애니메이션 옵션은 막대 차트에서 2.1.3에 대해 작동합니다.

약간 수정된 로스의 답변:

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);
            }
        });
    }
}

Ross의 Chart.js 2.0 이상에 대한 답변에 근거하여, 저는 막대의 높이가 척도 경계에 너무 선택되었을 때를 대비하기 위해 약간의 조정을 포함해야 했습니다.

그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);
                    }
                });
            }
        }

Chart.js 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);
            }
        });
  }
});

이 좋은 답변에 따라 막대 차트에 다음 옵션을 사용합니다.

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);

이것은 여전히 툴팁 시스템과 그의 장점(자동 위치 지정, 템플릿 작성, ...)을 사용하지만 장식(배경색, 캐럿, ...)을 숨깁니다.

이 플러그인을 사용하는 것이 좋습니다: datalabels

다음과 같이 플러그인을 자바스크립트 파일로 가져오기만 하면 차트에 레이블을 추가할 수 있습니다.

import 'chartjs-plugin-datalabels'

그리고 이 설명서를 사용하면 tuned도 충분합니다. https://chartjs-plugin-datalabels.netlify.com/options.html

Chartjs 3.7.0 버전으로 작동하도록 @Ross 답변 수정

animation: {
        duration: 0,
        onComplete: function() {
            ctx = this.ctx;
            ctx.font = Chart.helpers.fontString(Chart.defaults.font.size, Chart.defaults.font.style, Chart.defaults.font.family);
            ctx.textAlign = 'center';
            ctx.textBaseline = 'bottom';
            chartinst = this;
            this.data.datasets.forEach(function(dataset, i) {
                if(chartinst.isDatasetVisible(i)){
                    var meta = chartinst.getDatasetMeta(i);
                    meta.data.forEach(function(bar, index) {
                        var data = dataset.data[index];
                        ctx.fillText(data, bar.x, bar.y - 5);
                    });
                }
            });
        }
    }

이 경우 애니메이션은 0이 될 수 있습니다. 더 멋진 모습을 가지기 위해 보다 "정적인" 시각화를 원하는 경우 호버 및 툴팁을 비활성화할 수 있습니다.

또한 isDataSetVisible은 여러 데이터셋의 경우 데이터셋을 숨길 때 표시되는 숫자를 제거합니다.

내 경험상, 일단 당신이 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);
                }
            }
        }
    }
});

Chart.js 샘플(파일 Chart.js-2.4.0/samples/data_labelling.html)에서:

        // Define a plugin to provide data labels

        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);
                        });
                    }
                });
            }
        });

애런 휴든의 답변을 조금 편집했지만 막대 차트만 편집했습니다.버전 추가:

• 애니메이션에서 값에 대해 페이드됩니다.
• 바가 너무 높으면 바 안쪽에 값을 배치하여 클리핑을 방지합니다.
• 눈 깜빡임 금지.

단점:내부에 값이 있는 막대 위를 맴돌면 값이 약간 들쭉날쭉해 보일 수 있습니다.호버 효과를 비활성화하는 해결책을 찾지 못했습니다.또한 사용자 설정에 따라 조정이 필요할 수도 있습니다.

구성:

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);
    }
  });
};

캔버스 상단에 너무 가까이 있을 경우 번호가 끊어지지 않도록 하려면 다음과 같이 하십시오.

yAxes: [{
    ticks: {
        stepSize: Math.round((1.05*(Math.max.apply(Math, myListOfyValues)) / 10)/5)*5,
        suggestedMax: 1.05*(Math.max.apply(Math, myListOfyValues)),
        beginAtZero: true,
        precision: 0
    }
}]

• 10 = 진드기수

• 5 = 눈금 값을 가장 가까운 5로 반올림 - 모든 값이 균등하게 증분됩니다.

• 1.05 =는 숫자가 잘리지 않도록 최대 y 축 눈금 값을 늘립니다.

xAxes에게도 비슷한 것이 통할 것입니다.

언급URL : https://stackoverflow.com/questions/31631354/how-to-display-data-values-on-chart-js