javascript – 如何使用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,}  
    ],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;
}