Question

我正在尝试生成一个堆积的柱形图，其中x轴上有一个时间轴，其中每个系列都不一定有一个与所讨论的日期相匹配的数据点。我能够生成每个数据点有多列的柱形图，但我真的想要一个堆积图表。图表的数据是JSON，我可以根据需要操作格式。

var options = {
              chart: {
                  renderTo: 'timeline',
                  zoomType: 'x',
                  type: 'column'
              },
              title: {
                  text: 'Releases'
              },
              yAxis: {
                  title: {
                    text: 'Count'
                  }
              },
              xAxis: {
                  type: 'datetime'
              },
              legend: {
                  enabled: true
              },
              series: []
          };

/* 
Following URL returns json like:

{
    "rows": {
        "dynamicCategory1": {
            "0": {
                "count": "7",
                "unix_date": "1344225600"
            },
            "3": {
                "count": "2",
                "unix_date": "1344312000"
            }
        },
        "dynamicCategory2": {
            "5": {
                "count": "7",
                "unix_date": "1344225600"
            },
            "7": {
                "count": "2",
                "unix_date": "1345003200"
            }
        }
    }
}

*/

$.getJSON("/mydatainjsonformat/", function(data) {

  $.each(data.rows, function(key, val) {
    var series = { data: [] };

    series.name = key;

    $.each(val, function(key2, val2) {
      var x = parseFloat(val2.unix_date * 1000);
      var y = parseFloat(val2.count);

      series.data.push([x, y]);

    });

    options.series.push(series);

  });

  $(function () {
      var chart1;
      $(document).ready(function() {
          chart1 = new Highcharts.Chart(options);
      });
  });
});

从理论上讲，我可以改变数据，为每个没有给定日期值的类别包含0，然后将日期作为类别 - 但这是正确的方法吗？这不会搞砸x轴上的时间吗？任何方向都非常感激。

jsfiddle

Answer 1

所以：在经历了多次痛苦和痛苦之后，我错过了这个需要作为我的图表配置传递的节：

              plotOptions: {
                column: {
                  stacking: 'normal'
                },

甚至这花了我很长时间才找到，因为我的大部分测试中都有那个节，但没有驼峰的情节选项。 bangs多次敲击键盘并哭泣

现在工作得很好。其他麻烦：让jsfiddle通过AJAX调用（'/ echo / json /'）将json返回给你，你必须发布它。花了一些时间来确定为什么heck $ .getJSON也不起作用。

Answer 2

我认为你想要达到这样的目标。

你有类似事件从X日期开始，你想要画线到Y日期。

所以，你试图使用Stacked Bar图表来使用它，这样就可以获得Y轴上的线条。

如果我是正确的，那么我建议您使用Highstock，它是由Highcharts开发的库之一。

Highstock是创建时间表图表的首选API。

我创造了一个帮助你开始的样本小提琴。在这里：http://jsfiddle.net/mhardik/YmRUg/

Highcharts堆叠柱形图可能有不规则的时间间隔？

2 个答案: