Question

我有一个多系列柱形图（在这种情况下为3）。我希望在所有系列的列上叠加一条线。所以我用相同的列系列数据创建了另外3个Line系列。当只有一个列和行系列时，这非常有效。对于多个系列，该线渲染在该类别的中心，而不是显示在相应的列上（注意：左移该线将起作用，但我不知道如何）。

链接到JSFiddle：http://jsfiddle.net/Wm6dU/7/

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: "Column Line Combo"
        },
        xAxis: {
            categories: [
                "Cat 1",
                "Cat 2",
                "Cat 3"],
        },
        yAxis: {
            title: {
                text: 'USD'
            }
        },
        series: [{
            name: "Revenue",
            data: [
            49.9,
            71.5,
            106.4],
            type: "column"
        }, {
            name: "Revenue",
            data: [
            49.9,
            71.5,
            106.4],
            type: "line"
        }, {
            name: "Cost of goods sold",
            data: [
            83.6,
            78.8,
            98.5],
            type: "column"
        }, {
            name: "Cost of goods sold",
            data: [
            83.6,
            78.8,
            98.5],
            type: "line"
        }, {
            name: "Operating Expenses",
            data: [
            48.9,
            38.8,
            39.3],
            type: "column"
        }, {
            name: "Operating Expenses",
            data: [
            48.9,
            38.8,
            39.3],
            type: "line"
        }]
    });
});

感谢。

Answer 1

如何为这些线设置x值？ http://jsfiddle.net/qPqCW/

, {
        name: "Revenue",
        data: [
            {x:-0.2, y:49},
            {x:0.8, y:71.5},
            {x:1.8, y:106.4}],
        type: "line"
    }, 

, {
        name: "Operating Expenses",
        data: [
            {x:.2,y:48.9},
            {x:1.2, y:38.8},
            {x:2.2, y:39.3}],
        type: "line"
    }

为了计算X值，我查看了源代码。以下假设您使用的是groupPadding .2和pointPadding .1的默认值。我修改了getColumnMetrics函数以获得通用解决方案。这就是我想出的：

var columnMetrics = [];
    for (j=0;j<index;j++) {

        var categoryWidth = 1,
            groupPadding = categoryWidth * .2,
            groupWidth = categoryWidth - 2 * groupPadding,
            pointOffsetWidth = groupWidth / index,
            pointPadding =  pointOffsetWidth * .1,
            pointWidth = pointOffsetWidth - 2 * pointPadding, 
            colIndex =  j,
            pointXOffset = pointPadding + (groupPadding + colIndex *
                pointOffsetWidth - (categoryWidth / 2));

        columnMetrics.push( { 
            width: pointWidth, 
            offset: pointXOffset,
            center: pointXOffset + (pointWidth /2.0)
        });
    }
    var series = [];
    for(i=0;i<index;i++) {
        series.push({
            name: "Column" + index,
            data: [
            49.9,
            71.5,
            106.4],
            type: "column"
        });
        series.push({
            name: "Line" + index,
            data: [
                {x:0 + columnMetrics[i].center, y:49},
                {x:1 + columnMetrics[i].center, y:71.5},
                {x:2 + columnMetrics[i].center, y:106.4}],
            type: "line"
        });
    }

这显示了1到10个系列的结果：http://jsfiddle.net/b8gS5/

具有多个系列的Highcharts列+线组合图。在列上发出对齐线

1 个答案: