আমি http://www.chartjs.org/ থেকে লাইন চার্ট ব্যবহার করছি
আপনি দেখতে পাচ্ছেন যে ওয়াই অক্ষের সর্বাধিক মান (১৩০) এবং ন্যূনতম মান (automatically০) স্বয়ংক্রিয়ভাবে চয়ন করা হয়েছে, আমি সর্বোচ্চ মান = 500 এবং ন্যূনতম মান = 0 চাই। এটা কি সম্ভব?
Y অক্ষের জন্য কীভাবে সর্বোচ্চ এবং ন্যূনতম মান সেট করা যায়
উত্তর:
আপনাকে স্কেলটি ওভাররাইড করতে হবে, এটি ব্যবহার করে দেখুন:
window.onload = function(){
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx).Line(lineChartData, {
scaleOverride : true,
scaleSteps : 10,
scaleStepWidth : 50,
scaleStartValue : 0
});
}
V1.x এর জন্য ডকুমেন্টেশনগুলিও রয়েছে @ বোয়াজ
—
ব্ল্যাক
@ ইশানমাহাজান সেখানে থাকত :) আমি আর এটি খুঁজে পাচ্ছি না। আমি মনে করি এটি একটি ভাল আয়না: Web-beta.archive.org/web/20150816192112/http://…
—
বোয়াজ
চার্ট.জেএস ভি 2 (বিটা) এর জন্য, ব্যবহার করুন:
var options = {
scales: {
yAxes: [{
display: true,
ticks: {
suggestedMin: 0, // minimum will be 0, unless there is a lower value.
// OR //
beginAtZero: true // minimum value will be 0.
}
}]
}
};
আরও বিশদের জন্য রৈখিক অক্ষ কনফিগারেশনে চার্ট.জেএস ডকুমেন্টেশন দেখুন ।
আরো দেখুন
—
রালফ Callaway
min, max, এবং stepsizeগুণাবলীর ticksনামস্থান
suggestedMaxসর্বনিম্ন শীর্ষ মানের জন্য
var config = {
type: 'line',
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First dataset",
data: [10, 80, 56, 60, 6, 45, 15],
fill: false,
backgroundColor: "#eebcde ",
borderColor: "#eebcde",
borderCapStyle: 'butt',
borderDash: [5, 5],
}]
},
options: {
responsive: true,
legend: {
position: 'bottom',
},
hover: {
mode: 'label'
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Month'
}
}],
yAxes: [{
display: true,
ticks: {
beginAtZero: true,
steps: 10,
stepValue: 5,
max: 100
}
}]
},
title: {
display: true,
text: 'Chart.js Line Chart - Legend'
}
}
};
var ctx = document.getElementById("canvas").getContext("2d");
new Chart(ctx, config);<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.bundle.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<canvas id="canvas"></canvas>
</body>
২.৪.০-তে ঠিক জরিমানা কাজ করেছেন
—
অবিনাশ
চার্টজেএস v2.4.0
হিসাবে এ উদাহরণ দেখানো https://github.com/jtblin/angular-chart.js febuary 2017 7 উপর (যেহেতু এই ঘন পরিবর্তন সাপেক্ষে মনে করা হয়):
var options = {
yAxes: [{
ticks: {
min: 0,
max: 100,
stepSize: 20
}
}]
}
এর ফলে 5 টি-অক্ষের মান যেমন:
100
80
60
40
20
0
আমি এই কাজগুলিতে অবাক হয়েছি কারণ আমি ভেবেছিলাম
—
ক্লাডেকেনিলিল
xAxesএবং বিকল্পগুলির yAxesনীচে নেস্ট করা উচিত ছিল scales। এটি প্লাসটি ওফার সার্জেভের উত্তরের চেয়েও নতুন যা সঠিক বলে মনে হচ্ছে তা অবাক করার মতো।
আমার চার্টে প্রচুর শব্দ সহ বেশ কয়েকটি সমীকরণ রয়েছে features কোন এক সমীকরণের বৃহত্তম মানের ভিত্তিতে রিয়েল টাইমে সর্বাধিক মান আপডেট করার কোনও উপায় আছে? উদাহরণস্বরূপ, সর্বাধিক মান + 100.
—
মার্টিন এরলিক
window.onload = function(){
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx ,{
type: 'line',
data: yourData,
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true,
min: 0,
max: 500
}
}]
}
}
});
আমি v2 এ 'অপশন' দিয়ে কনফিগার করি।
আপনার ডকুমেন্টেশন পড়তে হবে: http://www.chartjs.org/docs/#scales-linear-scale
ধন্যবাদ। এইটি আমার জন্য চার্ট.জেএস এর v2.5 এ কাজ করেছে। সহজ এবং কার্যকর।
—
আয়নুত নেখুলা
দস্তাবেজগুলি এত হতাশাব্যঞ্জক ... উপলভ্য বিকল্পগুলি অনুমান করার জন্য আমাকে লোকের উদাহরণগুলি অনুসন্ধান করতে হবে।
—
অ্যাড্রিয়ান পি।
যদি কেউ খাঁটি জাভাস্ক্রিপ্ট ব্যবহার করে থাকেন তবে এই উত্তরটি সঠিক। আমি এটি ব্যবহার করে একটি ছোট উদাহরণ লিখেছি এবং আমি আমার সম্পূর্ণ জেএস কোডটি নীচে পোস্ট করেছি।
—
ইশারা আমারশেকের
আমি 20 এর ফাঁক দিয়ে y- অক্ষে 0 থেকে 100 পর্যন্ত মানগুলি প্রদর্শন করতে একটি জেএস লিখেছিলাম।
এটি আমার স্ক্রিপ্ট.জেএস
//x-axis
var vehicles = ["Trucks", "Cars", "Bikes", "Jeeps"];
//The percentage of vehicles of each type
var percentage = [41, 76, 29, 50];
var ctx = document.getElementById("barChart");
var lineChart = new Chart(ctx, {
type: 'bar',
data: {
labels: vehicles,
datasets: [{
data: percentage,
label: "Percentage of vehicles",
backgroundColor: "#3e95cd",
fill: false
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
min: 0,
max: 100,
stepSize: 20,
}
}]
}
}
});এটি ওয়েবে প্রদর্শিত গ্রাফ।
> সেরা সমাধান
"options":{
scales: {
yAxes: [{
display: true,
ticks: {
suggestedMin: 0, //min
suggestedMax: 100 //max
}
}]
}
}
yAxes: [{
display: true,
ticks: {
beginAtZero: true,
steps:10,
stepValue:5,
max:100
}
}]
এটি চার্ট.জেএস 2.0 এর জন্য:
এর মধ্যে কিছু কাজ না করার কারণ হ'ল আপনি যখন আপনার চার্টটি তৈরি করেন তখন আপনার বিকল্পগুলি ঘোষণা করা উচিত:
$(function () {
var ctxLine = document.getElementById("myLineChart");
var myLineChart = new Chart(ctxLine, {
type: 'line',
data: dataLine,
options: {
scales: {
yAxes: [{
ticks: {
min: 0,
beginAtZero: true
}
}]
}
}
});
})
এর জন্য ডকুমেন্টেশন এখানে: http://www.chartjs.org/docs/#scales
এটি কি চার্টজেএস-এর পরিবর্তনের জন্য উপযুক্ত হয়েছে যা সংস্করণ ২.০ নিয়ে এসেছে (আমার মনে হয় প্রশ্ন এবং গ্রহণিত উত্তর এক বছর আগে চার্টজেএস ১.x এর সাথে ডিল হয়েছিল)। খুব শীঘ্রই যদি এটি ব্যাখ্যা করা হয় তবে এই উত্তরটি আরও বেশি সহায়ক হবে। যদি সময় দেয় তবে কেবল এই মন্তব্যে মন্তব্য করুন। ধন্যবাদ।
—
দ্বিচলিত
1.1.1 দিয়ে, আমি 0.0 এবং 1.0 এর মধ্যে স্কেল ঠিক করতে নীচেরটি ব্যবহার করেছি:
var options = {
scaleOverride: true,
scaleStartValue: 0,
scaleSteps: 10,
scaleStepWidth: 0.1
}
আমার ক্ষেত্রে, আমি ইয়্যাক্সিস টিকগুলিতে একটি কলব্যাক ব্যবহার করেছি, আমার মানগুলি শতাংশে আছে এবং এটি যখন 100% এ পৌঁছায় এটি বিন্দুটি প্রদর্শন করে না, আমি এটি ব্যবহার করেছি:
yAxes: [{
ticks: {
beginAtZero: true,
steps: 10,
stepValue: 5,
max: 100.1,
callback: function(value, index, values) {
if (value !== 100.1) {
return values[index]
}
}
}
}],
এবং এটি ভাল কাজ করেছে।
যেহেতু উপরের পরামর্শগুলির মধ্যে কোনটি আমাকে চার্ট.জেএস ২.১.৪ এর সাহায্যে সহায়তা করে নি, তাই আমি আমার ডেটা সেট অ্যারেতে 0 মান যোগ করে এটি সমাধান করেছি (তবে কোনও অতিরিক্ত লেবেল নেই):
statsData.push(0);
[...]
var myChart = new Chart(ctx, {
type: 'horizontalBar',
data: {
datasets: [{
data: statsData,
[...]
আমি আমার একাধিক প্রকল্পে ফ্ল্যাট ল্যাব টেমপ্লেটের একটি পুরানো সংস্করণ ব্যবহার করছিলাম যা চার্ট.জেএস এর v1.x ব্যবহার করছিলাম যা আমি নিশ্চিত নই। আমি ইতিমধ্যে v2.x আপডেট করতে পারিনি কারণ এর সাথে ইতিমধ্যে আমার একাধিক প্রকল্প কাজ করছে । উল্লিখিত (bardata,options)আমার জন্য কাজ করে না।
সুতরাং সংস্করণ 1.x জন্য হ্যাক এখানে
calculatedScale = calculateScale(scaleHeight,valueBounds.maxSteps,valueBounds.minSteps,valueBounds.maxValue,valueBounds.minValue,labelTemplateString);
এর সাথে প্রতিস্থাপন করুন:
calculatedScale = calculateScale(scaleHeight,valueBounds.maxSteps,1,valueBounds.maxValue,0,labelTemplateString);
চার্টের একটি "মিনিট" এবং "সর্বোচ্চ" মান রয়েছে। এই লিঙ্কে ডকুমেন্টেশন
https://www.chartjs.org/docs/latest/axes/cartesian/linear.html
এই উত্তরটি এই প্রশ্নটিতে কোনও তথ্য যুক্ত করে না, যা 4 বছর আগে জিজ্ঞাসা করা হয়েছিল। তদ্ব্যতীত, লিঙ্কগুলি অদৃশ্য হয়ে যেতে পারে, সুতরাং, দয়া করে আপনার পোস্টে লিঙ্কটির সংক্ষেপটি অন্তর্ভুক্ত করুন।
—
warped
scales2.x সংস্করণে থাকা বস্তুটি একেবারেই আলাদা। নীচে @OferSegev উত্তর এবং 2.x ডকুমেন্টেশন দেখুন এখানে ।