用于绘制带有时间线的条形图的 Javascript 库 [关闭]答案

【问题标题】：Javascript library for drawing bar charts with timeline [closed]用于绘制带有时间线的条形图的 Javascript 库 [关闭]
【发布时间】：2015-06-05 15:05:06
【问题描述】：

我想将时间序列绘制为条形图（我想它也称为柱形图），保留时间线的比例。示例：

您能否推荐一个 javascript 库来提供代码以及如何将其可视化？我很清楚这个answer 并尝试了其中一些，但无法接近预期的结果。

javascript格式的示例数据：

var arr = new Array();
arr[0] = -100;
arr[3.5] = 10;
arr[5] = 110;

【问题讨论】：

你看过 d3 吗？
是的，但找不到路。此外，许多库都有绘制带有标签的条形图的方法，使时间线未缩放
Highcharts 是最好的库
@shreya "... 为代码提供如何可视化它"。您能告诉我 Highcharts 或任何其他库如何生成示例图片吗？

标签： javascript histogram bar-chart timeline column-chart

【解决方案1】：

看看这段代码，你可以用你自己的数组替换categories(in x-axis)和data。

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>

</head>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto">

</div>
<script>
$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Column chart with negative values'
        },
        credits: {
            enabled: false
        },
        series: [{
        name: 'Bar Chart',
        data: [

    { x: 0, y: -100 },
    { x: 4.9, y: 10},
    { x: 5, y: 100 }
    ]

    }]
    });
});
</script>
</html>

【讨论】：

看，在您的示例中，列 -100 和 10 之间的距离与 10 和 110 之间的距离相同。它们必须不同，即第一个距离应该与第二个距离相关为 3.5:1.5 （至少在光学上）。您可以将时间点从 3.5 更改为 4.99 以更清楚地看到问题。
我已经编辑了代码现在检查一下
谢谢，这让它发生

【解决方案2】：

看看Highcharts，它非常可配置。看看这个fiddle，只是把类型改成column

【讨论】：

这正是问题所在。您可以将等距标签放在 X 轴上。问题是如何将数值数据放在 X 轴上，使得列之间的距离根据它们而定