D3 堆积条形图随时间变化答案

【问题标题】：D3 stacked bar chart with timeD3 堆积条形图随时间变化
【发布时间】：2014-01-09 16:32:02
【问题描述】：

我在使用 d3 和日期时间时遇到问题。是否有显示具有时间维度的堆积条形图的示例？我想将用户的活动（例如乘坐公共汽车、步行等）可视化为条形图。现有的都是基于数字的，理解起来真的很复杂。我发现这个https://gist.github.com/anotherjavadude/2940908 看起来更好，但对我来说仍然不清楚。

【问题讨论】：

您应该可以使用NVD3 轻松做到这一点。
谢谢，我已经切换到 HTML5。我认为 d3 不适合非标准图表。它旨在支持标准可视化，并且很难更改其预定义模板。至少现在我更习惯纯 HTML 5
这是错误的，没有预定义的模板

标签： javascript datetime d3.js stackedbarseries

【解决方案1】：

我发现Stacked bar-charts on time scale using D3 似乎符合您的需求。

无论如何，我宁愿使用Highcharts 并将其堆叠条形图用作时间序列。

在下面的 JSfiddle 上，您可以确切地看到我是如何做到的：

http://jsfiddle.net/fwuensche/y1w9nnod/3/

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'My energy consumption'
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 
                         'Jun', 'Jul', 'Aug', 'Sep', 'Oct']
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Consumption [KWh]'
            },
            stackLabels: {
                enabled: true,
                style: {
                    fontWeight: 'bold',
                    color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                }
            }
        },

        // series data goes here

    });
});

希望对你有帮助！

【讨论】：

【解决方案2】：

这是一个基于日期的条形图示例：http://bl.ocks.org/mbostock/1134768

【讨论】：

谢谢，我看过这个例子并试着理解它。初学者学起来太复杂了。