के साथ कैसे बनाएँ I ZingChart के साथ ऐसा दिखने वाला एक चार्ट बनाने की कोशिश कर रहा हूं।इस चार्ट को ZingChart
मैं एक बार चार्ट हर तरह से मैं के बारे में सोच सकते हैं फेरबदल किया है लेकिन मैं अभी भी बंद नहीं आ रहा हूँ।
क्या यह चार्ट ज़िंगचर्ट के साथ संभव है?
निम्नलिखित चार्ट आपके द्वारा संलग्न कटआउट से नकल किया गया है। यदि आपके पास किए गए कार्यों के बारे में आपके कोई प्रश्न हैं, तो मैं निश्चित रूप से विस्तार से जा सकता हूं।
नोट: सर्वोत्तम देखने के परिणाम के लिए पूर्ण पृष्ठ दृश्य में चार्ट देखें।
var myConfig = {
type:'mixed',
title: {
text: 'Rank by MPH',
},
scaleX: {
offset: 0, // force line to start at scale
offsetEnd: 10, // force last bar away from end of the scale
maxItems: 2, // force display of first and last labels
tick: {
visible:false,
},
item: {
fontColor: '#000',
fontSize: 14,
rules: [ // adjust last label
{
rule: '%i == 16',
text: '129',
}
]
},
lineWidth:2,
lineColor: '#000',
},
scaleY: {
minValue: 0,
maxValue: 100,
step: 50,
format: '%v%',
markers: [
{ // diagonal line
type: 'line',
range: [0,100],
lineWidth: 3,
lineColor: '#000',
}
],
tick: {
visible:false,
},
item: {
fontColor: '#000',
fontSize: 14
},
guide: {
visible: false,
},
lineWidth:2,
lineColor: '#000',
},
labels: [
{ // hook label to line marker to display rank
hook: 'node:plot=1,index=1',
\t backgroundColor: '#000',
\t fontColor: '#fff',
\t text: 'Rank 11/16',
calloutWidth: 20,
\t callout: true,
\t calloutPosition: 'bottom',
\t padding: 15,
\t borderRadius: 10,
\t fontSize: 15,
\t offsetY: -50,
},
{ // hook label to scale to display mph
hook: 'scale:index=11',
\t text: '100 mph',
\t fontSize: 15,
\t offsetY: 15,
},
],
\t series: [
\t \t {
\t \t type: 'bar',
\t \t barWidth:20,
\t \t barSpacing:1,
\t \t borderRadius:'10 10 0 0',
\t \t backgroundColor: '#c0c0c0',
\t \t tooltip: {
\t \t backgroundColor: '#000',
\t \t text: 'Rank %i/16',
calloutWidth: 20,
\t callout: true,
\t calloutPosition: 'bottom',
\t padding: 15,
\t borderRadius: 10,
\t fontSize: 15,
\t placement: 'node:top',
\t offsetY: -20,
\t \t },
\t \t rules: [
\t \t { // make one bar purple
\t \t rule: '%i == 11',
\t \t backgroundColor: 'purple',
\t \t }
\t \t ],
\t \t \t values: [null,5,9,12,19,25,30,34,39,45,49,54,58,65,69,74,79],
\t \t },
\t \t {
\t \t type: 'line',
\t \t lineColor: 'purple',
\t \t lineStyle: 'dotted',
\t \t valueBox: {
\t \t text: '%v%',
\t \t placement: 'left',
\t \t offsetX: -18,
\t \t fontSize: 12,
\t \t rules: [
\t \t { // hide the valuebox at the node on the line
\t \t rule: '%i == 1',
\t \t visible: false,
\t \t }
\t \t ],
\t \t },
\t \t marker: {
\t \t borderColor: 'purple',
\t \t borderWidth: 2,
\t \t backgroundColor: '#fff',
\t \t size: 9, \t \t
\t \t rules: [
\t \t { // hide first marker of the line
\t \t rule: '%i == 0',
\t \t visible:false,
\t \t }
\t \t ],
\t \t },
\t \t values: [[0,69], [11,69]], // array of arrays to better plot the line
\t \t }
\t ]
};
zingchart.render({
\t id: 'myChart',
\t data: myConfig,
\t height: '100%',
\t width: '100%',
});html, body {
\t height:100%;
\t width:100%;
\t margin:0;
\t padding:0;
}
#myChart {
\t height:100%;
\t width:100%;
\t min-height:150px;
}
.zc-ref {
\t display:none;
}<!DOCTYPE html>
<html>
\t <head>
\t \t <script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
\t </head>
\t <body>
\t \t <div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
\t </body>
</html>
धन्यवाद! मुझे एहसास नहीं हुआ कि मैं चार्ट जोड़ सकता हूं! –