Chart.js ব্যবহার করা সম্ভব কিনা তা আমি জানতে চাই ডাটা মান প্রদর্শন করতে? আমি গ্রাফ মুদ্রণ করতে চাই।
কোন পরামর্শের জন্য ধন্যবাদ।
উত্তর:
দেরীতে সম্পাদনা: 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);
});
})
}
});এখানে Chart.js 2.3 এর একটি আপডেট সংস্করণ রয়েছে
23 সেপ্টেম্বর, 2016: লাইন / বার উভয় প্রকারের জন্য v2.3 দিয়ে কাজ করার জন্য আমার কোড সম্পাদিত।
গুরুত্বপূর্ণ: আপনার অ্যানিমেশনটির প্রয়োজন না হলেও, সময়কাল বিকল্পটি 0 তে পরিবর্তন করবেন না, অন্যথায় আপনি চার্টইনস্ট্যান্স পাবেন .c কন্ট্রোলার অপরিজ্ঞাত ত্রুটি।
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>এই অ্যানিমেশন বিকল্পটি একটি বার চার্টে ২.১.৩ এর জন্য কাজ করে।
সামান্য সংশোধিত @ রস উত্তর
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}
.filter(dataset => !dataset._meta[0].hidden)
আমি মনে করি চার্টজেএস ভি 2.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);
}
});
}
});Chart.defaults.global.tooltips.enabled = false;। এই সমাধানটি সহ সমস্যাটি হ'ল afterDrawফাংশনটি কয়েকশবার বলা হয়, সম্ভবত সিপিইউ ওভারহেড উত্পাদন করে। তবুও, এটি পলক ছাড়াই এখনকার একমাত্র উত্তর। আপনার যদি horizontalBarচার্টগুলির জন্য আরও ভাল রেন্ডারিং দরকার হয় তবে ব্যবহার করুন ctx.textAlign = 'left'; ctx.textBaseline = 'middle';এবং ctx.fillText(dataset.data[i], model.x+5, model.y);।
চার্ট.জেএস ২.০ এবং তার উপরে @ রসের উত্তর উত্তরের উপর ভিত্তি করে, বারের উচ্চতা খুব বেশি মাত্রায় স্কেল সীমানা বেছে নেওয়ার সময় আমাকে মামলার বিরুদ্ধে রক্ষা করার জন্য সামান্য কিছুচিহ্ন অন্তর্ভুক্ত করতে হয়েছিল।
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 করতে পুনরায় আঁকুন ও টেক্সট প্রদর্শিত হয় কারণ এই সঙ্গে একই হতে চাইছিলেন 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কলব্যাকে আলুপাওলিংস এবং হুয়াং ট্র্যাংয়ের উত্তরগুলি ব্যবহার করেছি তবে লেখচিত্রটি বার বার আঁকতে ও অবাঞ্ছিত afterDrawঝাপটায় দেয় তারপরেও এটি ট্রিগার হয়ে যায় I আলুচিকিত্সার সরবরাহিত ফিডেলে কি ঘটবে না? কোন আইডিয়াস প্লিজ?
চার্ট.জেএস নমুনা থেকে (ফাইল Chart.js-2.4.0 / নমুনা / ডেটা_বেলিংএইচটিএমএল):
`` `// ডেটা লেবেল সরবরাহ করতে একটি প্লাগইন সংজ্ঞায়িত করুন
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
জেএস ফাইলটিতে প্লাগইন আমদানি করে কেবল আপনার চার্টগুলিতে লেবেল যুক্ত করা যেতে পারে যেমন:
import 'chartjs-plugin-datalabels'এবং এই দস্তাবেজগুলি ব্যবহার করে সূক্ষ্ম সুর করা যেতে পারে: https://chartjs-plugin-datalabels.netlify.com/options.html
@ অজদ্দীর উত্তরটি কিছুটা সম্পাদিত। কেবল বার চার্টের জন্য । আমার সংস্করণ যোগ করেছে:
ডাউনসাইড: যখন কোনও বারের মধ্যে এর মান রয়েছে তার উপর দিয়ে ঘুরে বেড়ানোর সময় মানটি কিছুটা ঝাঁকুনির মতো দেখায়। হোভার ইফেক্টগুলি অক্ষম করে এমন কোনও সমাধান আমি পাই নি। এটি আপনার নিজস্ব সেটিংসের উপর নির্ভর করে টুইটারের প্রয়োজন হতে পারে।
কনফিগারেশন:
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);
}
});
};calculateTickRotationit's এটি স্কেল ফাংশনের অভ্যন্তরে। আমি এটি বিশ্লেষণ করব।
আমার অভিজ্ঞতা থেকে, একবার আপনি চার্টজ-প্লাগইন-ডেটাবেলস প্লাগইন অন্তর্ভুক্ত করেছেন ( <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);
}
}
}
}
});