如何使用文本和圖像作爲x軸類別實現分組類別插件？在highchart？

Question

這樣的事情？這一個使用文本+圖像作爲一個xaxis類別。我的目標是將圖像作爲一個x軸類別，將文本標籤作爲另一個類別，就像分組類別一樣，只是該示例僅將文本標籤顯示爲類別。

 $(function() { 

     var categoryImgs = { 
      'AIA': '<img src="http://dummyimage.com/60x60/ff6600/ffffff"><img>&nbsp;', 
      'AMP':'<img src="http://highcharts.com/demo/gfx/sun.png"><img>&nbsp;', 
      'AMP RPP':'<img src="http://highcharts.com/demo/gfx/sun.png"><img>&nbsp;', 
      'Asteron Life':'<img src="http://highcharts.com/demo/gfx/sun.png"><img>&nbsp;', 
      'Fidelity Life':'<img src="http://highcharts.com/demo/gfx/sun.png"><img>&nbsp;' 
     }; 

     var totals = new Array(); 
     var stackTotals = new Array(); 
     var i = 5, j = 0; 
     //totals = HighchartsAdapter 
     function reverse() { 
      totals.reverse(); 
     } 

     $('#container').highcharts({ 
      chart: { 
       type: 'column' 
      }, 

      title: { 
       text: 'Premium Summary' 
      }, 
      yAxis: { 
       min: 0, 
       title: { 
        text: '' 
       }, 
       labels: { 
        formatter: function() {        
         return '$' + this.value; 
        } 
       }, 
       stackLabels: { 
        enabled: true, 
        style: { 
         fontWeight: 'bold', 
         color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray',               
        },             
        formatter: function() { 
         totals[i++] = this.total;       
         return ''; 
        }, 

       }      
      }, 

      xAxis: { 
       categories: ['AIA', 'AMP', 'AMP RPP', 'Asteron Life', 'Fidelity Life'], 
       labels: { 
        x: 5, 
        useHTML: true, 

        formatter: function() {       

         var n = totals.shift(); 
         return '<div class="stacktotal">$' + n + '</div><div id="div1" class="myToolTip' + this.value +'" title="Hello ' + this.value + '">' + categoryImgs[this.value] + '</div>'; 

        }, 
        events: { 
         mouseover: function() { 
          var elm = this.children.div1.className; 

          switch (elm) { 
           case "myToolTipAIA": 
            $('#hoverboard').html('<img name="testimg" src="http://highcharts.com/demo/gfx/sun.png"><p>AIA</p>'); 
            break; 
           case "myToolTipAMP": 
            $('#hoverboard').html('AMP'); 
            break; 
           case "myToolTipAMP RPP": 
            $('#hoverboard').html('<img name="testimg" src="http://highcharts.com/demo/gfx/sun.png"><p>AMP RPP </p>'); 
            break; 
           case "myToolTipFidelity Life": 
            $('#hoverboard').html('Fidelity Life'); 
            break; 
           case "myToolTipAsteron Life": 
            $('#hoverboard').html('Asteron Life'); 
            break; 
          }         
         }, 
         mouseout: function() { 
          $('#hoverboard').html(''); 
         }        
        }, 
       }      
      }, 

      linkedTo: 0, 
      categories: ['AIA', 'AMP', 'AMP RPP', 'Asteron Life', 'Fidelity Life'], 

      legend: { 
       align: 'right', 
       x: -70, 
       verticalAlign: 'top', 
       y: 20, 
       floating: true, 
       backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white', 
       borderColor: '#CCC', 
       borderWidth: 1, 
       shadow: false 
      }, 
      tooltip: { 
       formatter: function() { 
        return '<b>' + this.x + '</b><br/>' + 
         this.series.name + ': ' + this.y + '<br/>' + 
         'Total: ' + this.point.stackTotal; 
       } 
      }, 
      plotOptions: { 
       column: { 
        stacking: 'normal', 
        dataLabels: { 
         enabled: true, 
         color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white', 
         style: { 
          textShadow: '0 0 3px black, 0 0 3px black' 
         }, 
         format: '${y}' 
        } 
       } 

      }, 

      series: [{ 
       name: 'Policy Fee', 
       y:'$' + this.value, 
       data: [200.12, 290, 45.78, 71, 120]      
      }, { 
       name: 'WOP', 
       data: [150, 210.23, 150, 200, 100] 
      }, { 
       name: 'Income Protection', 
       data: [89, 400, 258.13, 212, 152] 
      }, { 
       name: 'Life Cover', 
       data: [150, 210.23, 150, 200, 100] 
      } ] 

     });   

    }); 

Answer 1

看起來像現在格式化爲分組類別標籤插件不支持。

您可以通過編輯源實現這一目標：http://jsfiddle.net/cFu8z/75/

註釋掉線#376 & #377：

• https://github.com/blacklabel/grouped_categories/blob/master/grouped-categories.js#L376
• https://github.com/blacklabel/grouped_categories/blob/master/grouped-categories.js#L377