javascript - चार्ट.जेएस पर डेटा वैल्यू कैसे प्रदर्शित करें




chart.js (10)

चार्ट.जेएस 2.3 के लिए यहां एक अद्यतन संस्करण है

23 सितंबर, 2016: मेरे कोड को लाइन / बार प्रकार दोनों के लिए v2.3 के साथ काम करने के लिए संपादित किया गया।

महत्वपूर्ण: यहां तक ​​कि यदि आपको एनीमेशन की आवश्यकता नहीं है, तो अवधि विकल्प को 0 पर न बदलें, अन्यथा आपको चार्ट इंस्टेंट कंट्रोलर त्रुटि नहीं मिलेगी

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>

मैं पूछना चाहूंगा कि चार्ट.जेएस का उपयोग करना संभव है या नहीं डेटा मूल्य प्रदर्शित करने के लिए? मैं ग्राफ मुद्रित करना चाहता हूं।

किसी भी सलाह के लिए धन्यवाद।


इस अच्छे उत्तर के बाद, मैं बार चार्ट के लिए इन विकल्पों का उपयोग करूंगा:

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

यह अभी भी टूलटिप सिस्टम और उसके फायदे (स्वचालित पोजिशनिंग, टेम्पलेटिंग, ...) का उपयोग करता है लेकिन सजावट छुपाता है (पृष्ठभूमि रंग, देखभाल, ...)


देर से संपादन: ऐसा करने के लिए चार्ट.जेएस 2.7.0+ लिए एक आधिकारिक प्लगइन है: https://github.com/chartjs/chartjs-plugin-datalabels

मूल उत्तर:

आप एनीमेशन पर अंक / बार के माध्यम से लूप कर सकते हैं और मान प्रदर्शित कर सकते हैं

पूर्वावलोकन

एचटीएमएल

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

पहेली - http://jsfiddle.net/uh9vw0ao/


मुझे लगता है कि चार्टजेएस 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);
            }
        });
  }
});

मैं इस प्लगइन का उपयोग करने की सलाह दूंगा: https://github.com/chartjs/chartjs-plugin-datalabels

जेएस फ़ाइल में प्लगइन आयात करके लेबल को आपके चार्ट में जोड़ा जा सकता है उदाहरण के लिए:

import 'chartjs-plugin-datalabels'

और इन दस्तावेज़ों का उपयोग करके ठीक से ट्यून किया जा सकता है: https://chartjs-plugin-datalabels.netlify.com/options.html


चार्ट.जेएस 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);
                    }
                });               
            }
        }

यदि आप प्लगइन https://chartjs-plugin-datalabels.netlify.com/options.html का उपयोग कर रहे हैं तो निम्न कोड विकल्प ऑब्जेक्ट मदद करेगा

सुनिश्चित करें कि आप import 'chartjs-plugin-datalabels'; आयात import 'chartjs-plugin-datalabels'; करें import 'chartjs-plugin-datalabels'; अपनी जावास्क्रिप्ट फ़ाइल में अपनी टाइपस्क्रिप्ट फ़ाइल में या <script src="chartjs-plugin-datalabels.js"></script> संदर्भ जोड़ें।

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

Chart.js नमूने से (फ़ाइल चार्ट.जेएस-2.4.0 / नमूने / 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);
                    });
                }
            });
        }
    });

`` `


यह एनीमेशन विकल्प बार चार्ट पर 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);
        }
    });
}}

जावास्क्रिप्ट में इसका मतलब वही मान और प्रकार है।

उदाहरण के लिए,

4 == "4" // will return true

परंतु

4 === "4" // will return false 




javascript chart.js