3

我有一个多系列柱形图（在本例中为 3 个）。我想在所有系列的列上覆盖一条线。所以我用相同的列系列数据创建了另外 3 个线系列。当只有一个列和行系列时，这非常有效。对于多个系列，线条呈现在类别的中心，而不是显示在相应的列上（注意：左移线条会起作用，但我不知道如何）。

链接到 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"
        }]
    });
});

谢谢。

4

1 回答 1

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/

于 2013-08-12T04:24:09.460 回答