6
horizontal bar chartChart.js: क्षैतिज बार चार्ट में बार रिक्ति
var barOptions_stacked1 = {
tooltips: {
enabled: true
},
hover: {
animationDuration: 0
},
scales: {
xAxes: [{
ticks: {
beginAtZero: true,
fontFamily: "'Open Sans Bold', sans-serif",
fontSize: 11
},
scaleLabel: {
display: false
},
gridLines: {
},
stacked: true
}],
yAxes: [{
barThickness: 20,
gridLines: {
display: false,
color: "#fff",
zeroLineColor: "#fff",
zeroLineWidth: 0
},
ticks: {
fontFamily: "'Open Sans Bold', sans-serif",
fontSize: 11
},
stacked: true
}]
},
legend: {
display: true
},
pointLabelFontFamily: "Quadon Extra Bold",
scaleFontFamily: "Quadon Extra Bold"
};
var ctx1 = document.getElementById("Chart1");
var myChart1 = new Chart(ctx1, {
type: 'horizontalBar',
data: {
labels: ["BU 5", "BU 4", "BU 3", "BU 2", "BU 1"],
datasets: [{
data: [727, 589, 537, 543, 574],
backgroundColor: "rgba(63,103,126,1)",
hoverBackgroundColor: "rgba(50,90,100,1)",
label: "newly request"
}, {
data: [238, 553, 746, 884, 903],
backgroundColor: "rgba(163,103,126,1)",
hoverBackgroundColor: "rgba(140,85,100,1)",
label: "in progress"
}, {
data: [1238, 553, 746, 884, 903],
backgroundColor: "rgba(63,203,226,1)",
hoverBackgroundColor: "rgba(46,185,235,1)",
label: "active"
}, {
data: [1338, 553, 746, 884, 903],
backgroundColor: "rgba(255,169,188,1)",
hoverBackgroundColor: "rgba(255,99,132,1)",
label: "in approval"
}, {
data: [1438, 553, 746, 884, 903],
backgroundColor: "rgba(136,202,247,1)",
hoverBackgroundColor: "rgba(54,162,235,1)",
label: "recycle"
}, {
data: [1538, 553, 746, 884, 903],
backgroundColor: "rgba(196,232,116,1)",
hoverBackgroundColor: "rgba(152,177,98,1)",
label: "reject"
}]
},
options: barOptions_stacked1
});<canvas id="Chart1"></canvas>कैसे सलाखों के बीच का अंतर कम करने के लिए। मैंने श्रेणी स्पेसिंग, barValueSpacing की कोशिश की ... लेकिन कुछ भी काम नहीं करता है! यह छोटी चौड़ाई में ठीक दिखता है, लेकिन जब पूर्ण स्क्रीन चौड़ाई, बार के बीच की दूरी के कारण ऊंचाई बढ़ जाती है। कैनवास के लिए इनलाइन सीएसएस काम नहीं करता है क्योंकि यह डिफ़ॉल्ट चार्ट द्वारा ओवरराइड किया जाता है। इसके अलावा, मैं चार्ट प्रारंभ करते समय चार्ट की ऊंचाई सेट करने में सक्षम नहीं हूं: ctx1.canvas.height = 300; यह काम नहीं करता है! jsfiddle लिंक link
मेरे पास एक ही समस्या है .. क्या आपको कोई समाधान मिल रहा है? – Kael