ZingChartでこのチャートを作成するには

私はZingChartでこのように見える/機能するチャートを作成しようとしています。ZingChartでこのチャートを作成するには

私は棒グラフに私は考えることができるすべての方法を微調整しているが、私はまだ近くに来ていませんよ。

このグラフはZingChartで使用できますか？

2016-12-13 Shayna Symons

次の図は、添付したカットアウトから模倣されています。もしあなたが私のしたことについて疑問があるなら、私は確かに詳細に行くことができます。

注：最良の結果を得るには、全ページビューのチャートを参照してください。

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>

出典

2016-12-13 22:15:14 nardecky

ありがとうございます！私はチャートを組み合わせることができなかったことを私は知らなかった！ –

ZingChartでこのチャートを作成するには

答えて

関連する問題