如何将高级图表与不同但相似的x轴类别相结合?

时间:2015-06-09 23:57:49

标签: highcharts

我有2个这样的高图:http://jsfiddle.net/bqnkeLx9/

我希望能够将它们组合成这样的东西:http://jsfiddle.net/gy2yo184/

基本上,是否有一种基于另一个阵列将2个阵列连接在一起的简单方法?

var category1 = [1,2,4,6,9]
var arr1 = [1,2,3,4,5]
var category2 = [1,3,6,8]
var arr2 = [6,7,8,9]
//do something to end with:
var allcategories = [1,2,3,4,6,8,9]
arr1 = [1,2,0,3,4,0,5]
arr2 = [6,0,7,0,8,9,0]

或者可能有更简单的方法来绘制这个?

2 个答案:

答案 0 :(得分:2)

我认为没有一种简单的方法可以做到这一点。或者比起来更容易:

  • 制作独特的类别数组
  • 在缺少类别时,使用0值手动填充数组

例如:

// union without diplicates:
// taken from: 
// http://stackoverflow.com/questions/1584370/how-to-merge-two-arrays-in-javascript-and-de-duplicate-items
Array.prototype.unique = function() {
    var a = this.concat();
    for(var i=0; i<a.length; ++i) {
        for(var j=i+1; j<a.length; ++j) {
            if(a[i] === a[j])
                a.splice(j--, 1);
        }
    }
    return a;
};

现在用例:

// arrays:
var cats_1 = [1,2,4,6,9],
    cats_2 = [1,3,6,8],
    data_1 = [1,2,3,4,5],
    data_2 = [6,7,8,9],
    data_1_modified = [], 
    data_2_modified = [],
    categories;

// get cateogries
categories = cats_1.concat(cats_2).unique(); 

// you may want to sort categories
categories.sort(function(a, b) {
   return a - b; 
});

categories.map(function(e, i) {
    var index;
    if( (index = cats_1.indexOf(e)) == -1) {
        data_1_modified.push(0); // missing category
    } else {
        data_1_modified.push(data_1[index]);
    }
    if( (index = cats_2.indexOf(e)) == -1) {
        data_2_modified.push(0); // missing category
    } else {
        data_2_modified.push(data_2[index]);
    }
    return e;
});

$('#container1').highcharts({
    xAxis: {
        categories: categories
    },

    series: [{
        data: data_1_modified
    }, {
        data: data_2_modified   
    }]
});

现场演示:http://jsfiddle.net/bqnkeLx9/1/

答案 1 :(得分:-1)

你可以使用javascript函数concat()加入两个数组。 假设这里是我们的数组

var category1 = [1,2,4,6,9]
var arr1 = [1,2,3,4,5]
var category2 = [1,3,6,8]
var arr1 = [1,2,3,4,5]


var category = category1.concat(category1);

数组category的元素将如下所示 [1,2,4,6,9,8]

现在你可以在高亮局中传递数组

<强>更新

删除所有重复元素后,排序后最终数组存储在数组uniqueCat

$(function () {
    var category1 = [1,2,4,6,9];
    var category2 = [6,3,1,8];

    var allcategories = category1.concat(category2);
    var arr1 = [2,2,0,3,4,0,5];
    var arr2 = [6,0,7,0,8,9,0];

    var uniqueCat = allcategories.filter(function(elem, index, self) {
        return index == self.indexOf(elem);
    }).sort();

    $('#container1').highcharts({
        xAxis: {
            categories: uniqueCat
        },

        series: [{
            data: arr1
        },{
            data: arr2
        }]
    });
});

<强> fiddle