Highcharts:在一个系列直方图中为图例添加不同的颜色

Question

我在这里有问题示例代码: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/

Answer 1

您可以执行以下操作：

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'
           }
   },