javascript - Highcharts 堆叠柱形图可以具有不规则的时间间隔吗?

标签 javascript jquery highcharts

我正在尝试生成一个在 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

最佳答案

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

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

甚至这也花了我很长时间才找到,因为我的大部分测试都有该节,但没有驼峰式的plotOptions。 多次敲击键盘并哭泣

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

关于javascript - Highcharts 堆叠柱形图可以具有不规则的时间间隔吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12728191/

相关文章:

javascript - jQuery动态高度问题

php - Highcharts 3.0 版本更改导出选项?

javascript - 为什么 javascript 显示 "Uncaught SyntaxError: Identifier ' Common' has already been declared after making javascript class object"in console?

javascript - 与 child 一起最安全、最高效地去除元件

jquery - 将不同的 CSS 应用于不同的 jQuery 日期选择器

javascript - 使用canvg 将Highchart SVG 转PNG 时,所有文本出现两次 - 如何解决?

javascript - 在 highcharts 中表达 json 对象

使用变量调用 Javascript 命名空间

javascript - 如何使用 jQuery 禁用 Firefox 对所有图像的默认拖放行为?

Javascript 将 Infinity、NaN 或 ""重新定义为 0