如何使用ZingChart正确绘制直方图？

Question

我目前正在构建一个我想要显示直方图的应用程序。问题是我无法使用zingchart正确渲染直方图...我希望将scale-x的刻度放在数据点的每一侧，而不是以它们为中心，因为它们代表直方图箱的边界

下面是python函数，它使用numpy包上的直方图函数计算数据以创建直方图。

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}

然后在视图中使用这个直方图数据来渲染zing图表图（这是一个Jinja2模板，因为我使用Flask-framework）：

<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>

Answer 1

修改

要偏移scale-x数字位置，只需将offsetX属性添加到scaleX.item即可。这是一个例子......

scaleX: {
  item: {
    offsetX: 20
  }
}

ZingChart直方图的默认行为是在数据点的每一侧放置刻度线。我在您的图表JSON中放置了一些虚拟数据并将其渲染出来。这就是它所显示的内容。

您可以在此处查看图表：http://demos.zingchart.com/view/GQEQHWVV

您是否可以更深入地了解您要解决的问题？您传递的数据可能存在问题。据我所知，ZingChart正确渲染直方图。

仅供参考：我在ZingChart团队中