【问题标题】:Highcharts stacked column chart with with irregular time intervals possible?Highcharts堆积柱形图可能具有不规则的时间间隔?
【发布时间】:2012-10-04 13:18:27
【问题描述】:

我正在尝试生成一个堆积柱形图,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

【问题讨论】:

标签: javascript jquery highcharts


【解决方案1】:

所以:在经历了很多痛苦和折磨之后,我错过了需要作为图表配置传递的这节:

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

即使这样我也花了很长时间才找到,因为我在大部分测试中都有那节,但没有驼峰式 plotOptions。 多次敲击键盘并哭泣

现在效果很好。其他麻烦:要让 jsfiddle 通过 AJAX 调用('/echo/json/')向你返回 json,你必须向它发布。我花了一段时间才确定为什么 $.getJSON 也不起作用。

【讨论】:

    【解决方案2】:

    我认为你想要实现这样的目标。

    您有类似事件从 X 日期开始,并且您想在 Y 日期之前画线。

    因此,您正在尝试使用堆叠条形图来使用它,因此您会在 Y 轴上获得线条。

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

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

    我创建了一个示例小提琴,可以帮助您开始。给你:http://jsfiddle.net/mhardik/YmRUg/

    【讨论】:

    • 我想要实现的是在给定的一天按不同类别的数量显示细分,而类别的数量和种类可能会随着时间而变化。昨晚我发现了一个基本上是我想要实现的示例:jsfiddle.net/DjHDW/100 现在我只需要弄清楚我所拥有的和有什么不同。
    • @user1720033:这对你有帮助吗?请阅读常见问题解答以更好地使用 SO。
    • 如上所述,不,它没有帮助 - 我最终解决了我自己的问题(也如上所述)。感谢您的努力。
    猜你喜欢
    • 2016-06-08
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多