如何正确绘制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的直方图？

回答

相关问题