5
ZingChart에서 이와 같이 보이는 차트를 만들려고합니다.ZingChart에서이 차트를 만드는 방법
나는 막대 차트를 내가 생각할 수있는 모든 방법을 쥐게했다하지만, 난 여전히 가까이오고 있지 않다.
ZingChart에서이 차트를 사용할 수 있습니까?
ZingChart에서 이와 같이 보이는 차트를 만들려고합니다.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>
감사합니다! 나는 차트를 결합 할 수 있다는 것을 몰랐다! –