मैं http://www.chartjs.org/ से लाइन चार्ट का उपयोग कर रहा हूँ
जैसा कि आप देख सकते हैं कि Y अक्ष के लिए अधिकतम मूल्य (130) और न्यूनतम मूल्य (60) स्वचालित रूप से चुने गए हैं, मुझे अधिकतम मूल्य = 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 के साथ-साथ @Boaz
—
ब्लैक माम्बा
@IshanMahajan वहाँ हुआ करता था :) मैं इसे अब और नहीं जान सकता। मुझे लगता है कि यह एक अच्छा दर्पण है: 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.
}
}]
}
};
रेखीय कुल्हाड़ियों विन्यास पर chart.js प्रलेखन देखें अधिक जानकारी के लिए।
यह भी देख
—
राल्फ कालावे
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>
2.4.0 में ठीक काम किया
—
अविनाश
चार्टजस v2.4.0
जैसा कि उदाहरण में दिखाया गया है https://github.com/jtblin/angular-chart.js 7 वीं फेब्री 2017 को (क्योंकि यह लगातार परिवर्तन के अधीन लगता है):
var options = {
yAxes: [{
ticks: {
min: 0,
max: 100,
stepSize: 20
}
}]
}
इसके परिणामस्वरूप 5 y- अक्ष मान इस प्रकार होंगे:
100
80
60
40
20
0
मुझे आश्चर्य है कि यह काम करता है क्योंकि मुझे लगा कि
—
क्लॉडेकेनिलॉल
xAxesऔर विकल्पों में yAxesनिहित होने वाले थे scales। प्लस ओफ़ सर्गेव के उत्तर की तुलना में यह नया है जो सही प्रतीत होता है, यह भी आश्चर्यजनक है।
मेरे चार्ट में बहुत सारे शोर के साथ कई समीकरण हैं। क्या समीकरणों में से सबसे बड़े मूल्य के आधार पर वास्तविक समय में अधिकतम मूल्य को अपडेट करने का एक तरीका है? उदाहरण के लिए, अधिकतम मान + 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 पर काम करता था। js सरल और प्रभावी।
—
इयोनुत नेचुला
डॉक्स इतने निराशाजनक हैं ... मुझे उपलब्ध विकल्पों का अनुमान लगाने के लिए लोगों के उदाहरण खोजने होंगे।
—
एड्रियन पी।
यदि कोई शुद्ध जावास्क्रिप्ट का उपयोग कर रहा है, तो यह उत्तर सही है। मैंने इसका उपयोग करते हुए एक छोटा सा उदाहरण लिखा और मैंने अपना पूरा js कोड नीचे पोस्ट किया।
—
इशारा अमरसेकरा
मैंने 20 से 0 के अंतर के साथ y- अक्ष में 0 से 100 तक मान प्रदर्शित करने के लिए एक js लिखा।
यह मेरी पटकथा है। जे.एस.
//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
क्या यह चार्ट 2.0 में बदलाव के साथ आया है, जो कि संस्करण 2.0 के साथ आया था (मुझे लगता है कि सवाल और स्वीकृत उत्तर एक साल पहले चार्टजेएस 1.x से निपटा गया था)। यदि यह शीघ्र ही समझाया गया तो शायद यह उत्तर और भी अधिक उपयोगी होगा। शायद इस टिप्पणी पर समय की अनुमति देता है। धन्यवाद।
—
Dilettant
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]
}
}
}
}],
और यह अच्छी तरह से काम किया।
चूंकि ऊपर दिए गए किसी भी सुझाव ने मुझे चार्ट.जेएस 2.1.4 के साथ मदद नहीं की, इसलिए मैंने इसे अपने डेटा सेट ऐरे में 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 साल पहले पूछा गया था। इसके अलावा, लिंक गायब हो सकते हैं, इसलिए, कृपया अपनी पोस्ट में लिंक का सार शामिल करें।
—
विकृत
scales2.x संस्करणों में ऑब्जेक्ट बिल्कुल अलग है। नीचे @OferSegev उत्तर और 2.x प्रलेखन देखें ।