如何正確繪製ZingChart的直方圖？

我目前正在構建一個我想要顯示直方圖的應用程序。問題是我無法用zingchart正確渲染直方圖......我希望scale-x的刻度位於數據點的每一邊，而不是以它們爲中心，因爲它們表示直方圖區域的邊界。如何正確繪製ZingChart的直方圖？

下面是使用numpy包中的直方圖函數計算數據以創建直方圖的python函數。

from numpy import histogram 

def graph(self): 

    results = sorted(results, key=lambda x: mark) 
    marks = [result.mark for result in results] 

    maximum = 20 
    divisor = maximum 
    step = maximum/divisor 

    data, bin_edges = histogram(a=marks, range=(0, maximum), bins=divisor) 
    data = data.tolist() 

    return {'data': data, 'divisor': divisor, 'maximum': maximum, 'step': step}

然後將該直方圖數據在視圖中用於呈現誠圖表圖形（這是一個Jinja2的模板，因爲我用瓶的框架）：

<script> 
    var chartData = { 
     "type": "bar", 
     "plot": { 
      "aspect": "histogram", 
     }, 
     "plotarea": { 
      "adjust-layout": true, 
     }, 
     "series": [ 
      {"values": {{ graph['data'] }}}, 
     ], 
     "scale-x": { 
      "progression": "lin", 
      "min-value": 0, 
      "max-value": {{ graph['maximum'] }}, 
      "step": {{ graph['step'] }}, 
      "decimals": 1, 
     }, 
    }; 

    zingchart.render({ 
     "id": "graph1", 
     "data": chartData, 
     "width": "100%", 
     "height": "400px", 
     }); 
</script>

來源

2016-01-22 natolh

EDIT

要抵消scale-x數字位置，您只需將offsetX屬性添加到scaleX.item即可。下面是一個例子...

scaleX: { 
    item: { 
    offsetX: 20 
    } 
}

ZingChart直方圖的默認行爲是具有放置在數據點的每一側的刻度線。我在圖表JSON中放置了一些虛擬數據並將其呈現出來。這就是它所顯示的。

你可以在這裏查看圖表：http://demos.zingchart.com/view/GQEQHWVV

你能更深入地瞭解你正在試圖解決這個問題？您傳遞的數據可能存在問題。據我所知，ZingChart正確渲染直方圖。

僅供參考：我在ZingChart團隊

來源

2016-01-22 16:27:27

好的，也許我有點不清楚。蜱正確放置，但標籤集中在酒吧下方，我希望它們以蜱爲中心。我正在處理標記，所以如果我們將圖表視爲輸出，則第一個條形表示標記介於0和1之間的學生的編號。 – natolh

這裏是[JSON輸出]（https://codeshare.io/5iYDI）由應用程序。 – natolh

我將編輯答案以包含解決方案 –

如何正確繪製ZingChart的直方圖？

回答

相關問題