5

我在这里有问题的示例代码：http: //jsfiddle.net/pzamora/ztxPr/1/

我的系列中有不同的颜色，但是我需要它们出现在图例中

series: [{ name: 'V Genes',
        data: 
        [
            { 
                count: 18320.0, 
                y: 0.92, 
                color: '#3D96AE' 
            }, 
            { 
                count: 1337.0, 
                y: 0.17, 
                color: '#3D96AE' 
            }, 
            { 
                count: 33970.0, 
                y: 1.71, 
                color: '#4572A7' 
            }, 
            { 
                count: 1221.0, 
                y: 1.06, 
                color: '#3D96AE' 
            }, 
            { 
                count: 22073.0, 
                y: 1.11, 
                color: '#4572A7' 
            }, 
            { 
                count: 8331.0, 
                y: 0.42, 
                color: '#3D96AE' 
            }, 
            { 
                count: 64974.0, 
                y: 3.27, 
                color: '#4572A7' 
            },
            { 
                count: 9532.0, 
                y: 0.48, 
                color: '#3D96AE' 
            }, 
            { 
                count: 18106.0, 
                y: 0.91, 
                color: '#4572A7' 
            }
        ]
    }]

..我将 x 值与类别位置匹配，但我没有将所有数据显示在图表上

@jsfiddle：http: //jsfiddle.net/pzamora/phrP7/4/

4

4 回答 4

2

您可以执行以下操作：

  1. 将数据分成两个系列
  2. color为每个系列中的图例添加

  3. 为每个值添加x参数，使它们不重叠

    series: [{ name: 'X Genes', color: '#3D96AE',
    data:
    [ 
        {
            count: 18320.0,
            y: 0.92,
            color: '#3D96AE',
            x: 0
        },
        {
            count: 1337.0,
            y: 0.17,
            color: '#3D96AE',
            x: 1
        },
        {
            count: 1221.0,
            y: 1.06,
            color: '#3D96AE',
            x: 3
        },
        {
            count: 8331.0,
            y: 0.42,
            color: '#3D96AE',
            x: 5
        },
        {
            count: 9532.0,
            y: 0.48,
            color: '#3D96AE',
            x: 7
        }
    ]
},
{ name: 'V Genes', color: '#4572A7',
    data:
    [
        {
            count: 33970.0,
            y: 1.71,
            color: '#4572A7',
            x: 2
        },
        {
            count: 22073.0,
            y: 1.11,
            color: '#4572A7',
            x: 4
        },
        {
            count: 64974.0,
            y: 3.27,
            color: '#4572A7',
            x: 6
        },
        {
            count: 18106.0,
            y: 0.91,
            color: '#4572A7',
            x: 8
        }
    ]
}]

  4. 添加stacking: 'normal到 ，plotOptions使值位于每列的中间。

    plotOptions: {
        column: {
            cursor: 'pointer',
            stacking: 'normal'
        }
},
于 2012-12-19T22:05:03.977 回答
1 
series: [{ name: 'X Genes', color: '#3D96AE',
        data:
        [
            {
                count: 18320.0,
                y: 0.92,
                x: 0
            },
            {
                count: 1337.0,
                y: 0.17,
                x: 1
            },
            {
                count: 1221.0,
                y: 1.06,
                x: 3
            },
            {
                count: 8331.0,
                y: 0.42,
                x: 5
            },
            {
                count: 9532.0,
                y: 0.48,
                x: 7
            }
        ]
    },
    { name: 'V Genes', color: '#4572A7',
        data:
        [
            {
                count: 33970.0,
                y: 1.71,
                x: 2
            },
            {
                count: 22073.0,
                y: 1.11,
                x: 4
            },
            {
                count: 64974.0,
                y: 3.27,
                x: 6
            },
            {
                count: 18106.0,
                y: 0.91,
                x: 8
            }
        ]
    }]

You do not need to specify color attribute for each point if you specify it for series.

JsFiddle Demo

于 2012-12-20T09:30:13.730 回答
1

对于每个图例元素，您必须创建一个系列。
因此，如果您想要两个元素，则必须创建 2 个系列。
然后您必须x为每个点设置值，以使列堆叠在类别上。

演示

所以，如果我有以下类别：

['first', 'second', 'third']

我的系列必须有以下数据：
serie1：[{count: 400, y: 10, x: 1}]
serie2：[{count: 300, y: 5, x: 0}, {count: 500, y: 15, x: 2}]

这个案例系列 1 出现在second和系列 2 上first和third。

演示

参考

更新：

更新是因为她的类别有问题。发生这种情况是因为x值必须是 ainteger而不是 a string。

{
    y: 40,
    x: 2,
    count: 300
}

演示

于 2012-12-19T23:37:01.813 回答
0

图例中的系列只能有一种颜色，而系列中的每个点都可以覆盖这种颜色（正如您在代码中所做的那样）。如果您想在图例中获得更多数据，您可以使用您想要的代码将您的单个系列分成多个。目前尚不清楚您对该问题的预期结果是什么。

于 2012-12-19T20:58:14.837 回答