我正在尝试用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,}
],tick: {
visible:false,fontSize: 14
},guide: {
visible: false,labels: [
{ // hook label to line marker to display rank
hook: 'node:plot=1,index=1',backgroundColor: '#000',fontColor: '#fff',text: 'Rank 11 / 16',calloutWidth: 20,callout: true,calloutPosition: 'bottom',padding: 15,borderRadius: 10,fontSize: 15,offsetY: -50,{ // hook label to scale to display mph
hook: 'scale:index=11',text: '100 mph',offsetY: 15,],series: [
{
type: 'bar',barWidth:20,barSpacing:1,borderRadius:'10 10 0 0',backgroundColor: '#c0c0c0',tooltip: {
backgroundColor: '#000',text: 'Rank %i / 16',placement: 'node:top',offsetY: -20,rules: [
{ // make one bar purple
rule: '%i == 11',backgroundColor: 'purple',}
],values: [null,5,9,12,19,25,30,34,39,45,49,54,58,65,69,74,79],{
type: 'line',lineColor: 'purple',lineStyle: 'dotted',valueBox: {
text: '%v%',placement: 'left',offsetX: -18,fontSize: 12,rules: [
{ // hide the valueBox at the node on the line
rule: '%i == 1',visible: false,}
],marker: {
borderColor: 'purple',borderWidth: 2,backgroundColor: '#fff',size: 9,rules: [
{ // hide first marker of the line
rule: '%i == 0',visible:false,}
],values: [[0,69],[11,69]],// array of arrays to better plot the line
}
]
};
zingchart.render({
id: 'myChart',data: myConfig,height: '100%',width: '100%',});html,body {
height:100%;
width:100%;
margin:0;
padding:0;
}
#myChart {
height:100%;
width:100%;
min-height:150px;
}
.zc-ref {
display:none;
}