मैं पूछना चाहूंगा कि क्या यह चार्ट का उपयोग करना संभव है डेटा मान प्रदर्शित करने के लिए? मैं ग्राफ को प्रिंट करना चाहता हूं।
किसी भी सलाह के लिए धन्यवाद।
जवाबों:
देर से संपादित करें:2.7.0+ ऐसा करने के लिए Chart.js के लिए एक आधिकारिक प्लगइन है : 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);
});
})
}
});
onCompleteयहां कॉलबैक का उपयोग किया है, लेकिन यह तब भी होता है जब माउसओवर बार के चार्ट पर होता है, जिससे संख्या redraw के कारण पलक झपकती है। क्या ऐसा ही हो सकता है onAnimationComplete? मैं अपने मौजूदा चार्ट कोड के साथ इस कॉलबैक का उपयोग करने में असमर्थ हूं ( var chartBarनीचे pastebin.com/tT7yTkGh पर देखें )
यहाँ 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>यह एनीमेशन विकल्प बार चार्ट पर 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}hover पर दूर animating लेबल बंद करने के लिए निर्धारित किया था
.filter(dataset => !dataset._meta[0].hidden)
मुझे लगता है कि चार्टजेएस v2.x में ऐसा करने का सबसे अच्छा विकल्प एक प्लगइन का उपयोग करना है, इसलिए आपके पास विकल्पों में कोड का एक बड़ा ब्लॉक नहीं है। इसके अलावा, यह डेटा को बार पर मँडराते समय गायब होने से बचाता है।
Ie इस कोड का उपयोग करता है, जो एक प्लगइन को पंजीकृत करता है जो चार्ट तैयार होने के बाद पाठ जोड़ता है।
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फ़ंक्शन को सैकड़ों बार कहा जाता है, शायद सीपीयू ओवरहेड उत्पन्न करता है। फिर भी, बिना पलकें झपकाए ही इसका जवाब है। यदि आपको horizontalBarचार्ट के लिए एक बेहतर प्रतिपादन की आवश्यकता है , तो उपयोग करें ctx.textAlign = 'left'; ctx.textBaseline = 'middle';और ctx.fillText(dataset.data[i], model.x+5, model.y);।
चार्ट.जेएस 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);
}
});
}
}ctx.save()अंत में कॉल करने की कोशिश की लेकिन इससे कोई
onCompleteकॉल बैक मार डाला जाता है जब मैं बार की जो blink.Would को पुन: आरेखित और पाठ प्रकट होता है का कारण बनता है इस के साथ ही हो पर hovered onAnimationCompleteके रूप में अच्छी तरह से? मैं का उपयोग करने में असमर्थ हूँ onAnimationCompleteमेरे मौजूदा कोड के साथ कॉल बैक (देखें var chartBarके निचले भाग में pastebin। com / tT7yTkGh
यदि आप प्लगइन चार्टज-प्लगइन-डटलैबल्स का उपयोग कर रहे हैं तो निम्न कोड विकल्प ऑब्जेक्ट मदद करेगा
सुनिश्चित करें कि आप 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'
}
}
}
}इस अच्छे उत्तर के बाद , मैं बार चार्ट के लिए इन विकल्पों का उपयोग करूंगा:
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कॉलबैक में potatopeelings और हुआंग ट्रांग उत्तरों का उपयोग किया है, लेकिन यह तब भी ट्रिगर किया जाता है जब चार्ट की सलाखों पर मँडरा जाता है जो पाठ को फिर से बनाने और अवांछित पलक झपकने का कारण बनता है। मैंने भी कोशिश की afterDrawऔर यह सब समान है। अजीब तरह से क्या पोटेटोपेलिंग्स द्वारा प्रदान की जाने वाली बेला में नहीं होता है। किसी भी विचार plz?
चार्ट.जै सैंपल से (फाइल चार्ट.जस-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);
});
}
});
}
});`` `
मैं इस प्लगइन का उपयोग करने की सलाह दूंगा: https://github.com/chartjs/chartjs-plugin-datalabels
लेबल को js फ़ाइल में प्लगइन आयात करके अपने चार्ट में जोड़ा जा सकता है जैसे:
import 'chartjs-plugin-datalabels'और इन डॉक्स का उपयोग करके ठीक से ट्यून किया जा सकता है: https://chartjs-plugin-datalabels.netlify.com/opt.html.html
@ 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);
}
});
};calculateTickRotation। यह स्केल फ़ंक्शन के अंदर है। मैं इसका विश्लेषण करूंगा।
मेरे अनुभव से, एक बार जब आप चार्टज-प्लगइन-डटलैबल्स प्लगइन शामिल कर लेते हैं ( <script>अपने पृष्ठ पर चार्ट.जेएस टैग के बाद टैग लगाने के लिए सुनिश्चित करें ), आपके चार्ट मान प्रदर्शित करने लगते हैं।
यदि आप चुनते हैं तो आप अपनी आवश्यकताओं के अनुसार इसे अनुकूलित कर सकते हैं। अनुकूलन यहाँ स्पष्ट रूप से प्रलेखित है, लेकिन मूल रूप से, प्रारूप इस काल्पनिक उदाहरण की तरह है:
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);
}
}
}
}
});