Highcharts - Anpassen von Säulendiagrammen

Question

Ich erstelle Säulendiagramm mit Highcharts-Bibliothek. Ich versuche, benutzerdefinierte Säulendiagramm nach meiner Anforderung, aber zwei Dinge, die ich nicht tun kann. Der erste, untere Rand des Säulendiagramms und der zweite ist der Spaltenhintergrund für alle Reihen. Schau dir das Bild unten an, was ich erreichen muss.

Was ich bisher getan haben, ist hier: jsfiddle

jQuery(document).ready(function(jQuery) { 

      jQuery('#portlet-content').highcharts({ 
     credits: { 
      enabled: false 
     }, 
     exporting: { 
      enabled: false 
     }, 
     chart: { 
      type: 'column' 
     }, 
     title: { 
      text: 'Number of Applications' 
     }, 
     subtitle: { 
      text: 'BY COUNTRY' 
     }, 
     xAxis: { 
      visible: false 
     }, 
     yAxis: { 
      visible: false 
     }, 
     legend: { 
      enabled: true, 
      align: 'right', 
      verticalAlign: 'middle', 
      layout: 'vertical', 
      padding: 3, 
      itemMarginTop: 5, 
      itemMarginBottom: 5, 
      itemStyle: { 
       lineHeight: '14px' 
      }, 
      symbolHeight: 12, 
      symbolWidth: 12, 
      symbolRadius: 6 
     }, 
     tooltip: { 
      formatter: function() { 
           return '<b style="color:'+this.point.color+'">'+ this.y +'</b>'; 
          }, 
      useHTML: true, 
      borderWidth: 0, 
      style: { 
       padding: 0, 
       fontSize: '16px' 
      }, 
      shadow: false 
     }, 
     series: [ 
      { 
       name: "United Kingdom", 
       color: '#32323A', 
       data: [ 
        [294] 
       ] 
      }, { 
       name: "USA", 
       color: '#EB4825', 
       data: [ 
        [65] 
       ] 
      } 
      , { 
       name: "United Arab Emirates", 
       color: '#F7CC1E', 
       data: [ 
        [35] 
       ] 
      } 
      , { 
       name: "India", 
       color: '#24C746', 
       data: [ 
        [23] 
       ] 
      } 
      , { 
       name: "Canada", 
       color: '#2587EC', 
       data: [ 
        [18] 
       ] 
      } 
     ] 
     }); 

    }); 

Answer 1

Hinweis: ich meine Antwort auf eine bessere Adresse, um die spezifischen Anforderungen in der Original-Poster Frage geändert haben.

Hier ist, was würde ich vorschlagen:

erstellen gestapelten Säulendiagramm, in dem eine der Reihe eine „Dummy“ Serie ist mit dem der Benutzer nicht interagieren kann. Dies wird als Hintergrund dienen.

Hier ist eine schnelle Geige ich auf der Grundlage der Highcharts gestapelten Säulen Demo aufgearbeitet: http://jsfiddle.net/brightmatrix/v97p3eam/

plotOptions: { 
    column: { stacking: 'percent' } 
}, 
series: [ 
    /* this is the "dummy" series 
     set the "showInLegend" and "enableMouseTracking" attributes 
     to "false" to prevent user interaction */ 
    { name: 'dummy data', data: [5, 3, 4, 7, 2], color:'gray', 
       showInLegend: false, enableMouseTracking: false }, 
    /* here's the real data; set a unique color for each 
     set nulls for the columns where that color/data is not needed */ 
    { name: 'Series 1', color: 'red', data: [2,null,null,null,null] }, 
    { name: 'Series 2', color: 'orange', data: [null,2,null,null,null] }, 
    { name: 'Series 3', color: 'yellow', data: [null,null,2,null,null] }, 
    { name: 'Series 4', color: 'green', data: [null,null,null,2,null] }, 
    { name: 'Series 5', color: 'blue', data: [null,null,null,null,1] } 
] 

Bitte lassen Sie mich wissen, ob dies für Sie hilfreich ist!