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

Question

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

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

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

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

How correctly plotting an histogram with ZingChart?

javascript

python

flask

zingchart