3

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

下面是使用 numpy 包上的 histogram 函数计算数据以创建直方图的 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}

然后在视图中使用这个直方图数据来渲染 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>
4

1 回答 1

4

编辑

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

scaleX: {
  item: {
    offsetX: 20
  }
}

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

直方图演示图

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

你能提供更多关于你试图解决的问题的见解吗？您传递的数据可能存在问题。据我所知，ZingChart 可以正确渲染直方图。

仅供参考：我在 ZingChart 团队

于 2016-01-22T16:27:27.700 回答