Question

我正在尝试比较Donation与Disbursement，并希望将两个Highchart合并为一个，但是我们的Meteor Collection中的不同查询会产生不同的数据。

以下是示例查询实例中的结果数据。

Donation:
 Label ['May', 'Jun', 'Jul', 'Aug']
 Value [106.4, 129.2, 144.0]

Disbursement:
 Label ['Jun', 'Jul', 'Aug', 'Sep', 'Oct']
 Value [ 148.5, 216.4, 194.1, 95.6, 54.4]

这里是jfiddle链接Highchart- two charts

我在Highchart中尝试了正常的两个数据集，但只有当两个查询具有相同的标签值时才起作用，否则它开始显示错误。

Answer 1

如何使用一个连接类别，并为每个点使用该类别的正确索引？像这样：http://jsfiddle.net/teEQ3/9/

$('#container1').highcharts({
    xAxis: {
        categories: ['May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'] // result from  query
    },

    legend: {
        enabled: false
    },

    series: [{
        id: 'someId',
        data: [ [0, 106.4], [1, 129.2], [2, 144.0]] // result from  query
    }, {
        id: 'someId2',
        data: [ [1, 148.5], [2, 216.4], [3, 194.1], [4, 95.6], [5, 54.4]] // result from  query
    }]
});

正如你所说：两张图表合二为一。

Answer 2

您必须在查询后处理数据。

我会通过查找最高/最低类别并执行循环来填充其间的所有值来执行此操作。在每次循环中，您为类别构建一个数组，为数据系列构建两个单独的数组，包括x和y值。

具体方法取决于您获取数据的方式以及您正在使用的环境。

Highchart，两个图表合二为一，有来自Meteor Collection的不同数据

2 个答案: