javascript - Chart.js पर डेटा मान कैसे प्रदर्शित करें




(8)

@ Ahhuddy के उत्तर को थोड़ा संपादित किया। केवल बार चार्ट के लिए । मेरा संस्करण कहते हैं:

  • मूल्यों के लिए एनीमेशन में फीका।
  • यदि बार बहुत अधिक है, तो बार के अंदर मान की स्थिति के अनुसार कतरन रोकें।
  • कोई पलक नहीं।

नकारात्मक पक्ष: जब एक बार के ऊपर मँडरा जाता है जिसके अंदर मूल्य होता है तो मान थोड़ा दांतेदार लग सकता है। मुझे ऐसा कोई हल नहीं मिला है जो होवर के प्रभावों को अक्षम कर दे। अपनी सेटिंग्स के आधार पर इसे ट्विक करने की भी आवश्यकता हो सकती है।

विन्यास:

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

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

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


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

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

`` `


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

लेबल को js फ़ाइल में प्लगइन आयात करके अपने चार्ट में जोड़ा जा सकता है जैसे:

import 'chartjs-plugin-datalabels'

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


यदि आप प्लगइन चार्टज-प्लगइन-डटलैबल्स का उपयोग कर रहे हैं तो निम्नलिखित कोड विकल्प ऑब्जेक्ट मदद करेगा

सुनिश्चित करें कि आप 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.3 के लिए एक अद्यतन संस्करण है

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

महत्वपूर्ण: यहां तक ​​कि अगर आपको एनीमेशन की आवश्यकता नहीं है, तो अवधि विकल्प को 0 में न बदलें, अन्यथा आपको चार्ट मिलेगा। Instance.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>


देर से संपादित करें: ऐसा करने के लिए Chart.js 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/








chart.js