So erstellen Sie dieses Diagramm mit ZingChart

Question

Ich versuche ein Diagramm zu erstellen, das mit ZingChart aussieht/funktioniert.

Ich habe ein Balkendiagramm auf jede Weise gezwickt ich mir vorstellen kann, aber ich komme immer noch nicht in der Nähe.

Ist dieses Diagramm mit ZingChart möglich?

Answer 1

Das folgende Diagramm wird von dem Ausschnitt nachgeahmt, den Sie angeschlossen haben. Wenn Sie Fragen dazu haben, was ich getan habe, kann ich sicherlich ins Detail gehen.

Hinweis: Die besten Ergebnisse finden Sie im Diagramm in der vollständigen Seitenansicht.

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>