2014-11-04 86 views
1

我有一張用高圖形創建的條形圖,並在所有酒吧周圍都有邊框。但是,我禁用了網格線和刻度線。我想整個酒吧被包圍在一個邊界,包括酒吧的最左邊緣。是否可以在該欄的該部分添加邊框?你可以看到我的圖表這裏:在酒吧開始的高度圖條形圖上添加邊框

http://jsfiddle.net/9csjzsx5/

$(function() { 
    $('#container').highcharts({ 
     chart: { 
      type: 'bar', 
      width: 265, 
      height: 350 
     }, 
     credits: { 
      text: '' 
     }, 
     title: { 
      text: '' 
     }, 
     xAxis: { 
      labels: { 
       align: 'left', 
       x: 0, 
       y: -12 
      }, 
      tickWidth: 0, 
      lineWidth: 0, 
      minorGridLineWidth: 0,    
      categories: ['Label 1', 'Label 2', 'Label 3', 'Label 4', 'Label 5', 'Label 6', 'Label 7', 'Label 8', 'Label 9'] 
     }, 
     yAxis: { 

      minorGridLineWidth: 0, 
      majorGridLineWidth: 0, 

      gridLineWidth: 0, 
      labels: { 
       enabled: false 
      }, 
      title: { 
       text: '', 
       align: 'high' 
      }, 
      tickWidth: 0 
     }, 
     plotOptions: { 
      bar: { 
       colorByPoint: true, 
       colors: ['#4572A7', '#AA4643', '#89A54E', '#80699B', '#3D96AE', '#DB843D', '#92A8CD', '#A47D7C', '#B5CA92'] 
      }, 
      series: { 
       stacking: 'normal', 
       borderColor: '#303030' 
      } 
     }, 
     series: [{ 
      data: [{ 
       dataLabels: { 
        enabled: true, 
        defer: false, 
        align: 'right', 
        color: 'black', 
        x: 0, 
        format: '{y}%', 
        style: { 
         fontSize: '12px', 
         color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black', 
        } 
       }, 
       y: 9, 
       color: 'white' 
      }, { 
       dataLabels: { 
        enabled: true, 
        defer: false, 
        align: 'right', 
        color: 'black', 
        x: 0, 
        format: '{y}%', 
        style: { 
         fontSize: '12px', 
         color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black', 
        } 
       }, 
       y: 9, 
       color: 'white' 
      }, { 
       dataLabels: { 
        enabled: true, 
        defer: false, 
        align: 'right', 
        color: 'black', 
        x: 0, 
        format: '{y}%', 
        style: { 
         fontSize: '12px', 
         color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black', 
        } 
       }, 
       y: 8, 
       color: 'white' 
      }, { 
       dataLabels: { 
        enabled: true, 
        defer: false, 
        align: 'right', 
        color: 'black', 
        x: 0, 
        format: '{y}%', 
        style: { 
         fontSize: '12px', 
         color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black', 
        } 
       }, 
       y: 9, 
       color: 'white' 
      }, { 
       dataLabels: { 
        enabled: true, 
        defer: false, 
        align: 'right', 
        color: 'black', 
        x: 0, 
        format: '{point.name}%', 
        style: { 
         fontSize: '12px', 
         color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black', 
        } 
       }, 
       y: 10, 
       name: '<0.001', 
       color: 'white' 
      }, { 
       dataLabels: { 
        enabled: true, 
        defer: false, 
        align: 'right', 
        color: 'black', 
        x: 0, 
        format: '{point.name}%', 
        style: { 
         fontSize: '12px', 
         color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black', 
        } 
       }, 
       y: 10, 
       name: '<0.001', 
       color: 'white' 
      }, { 
       dataLabels: { 
        enabled: true, 
        defer: false, 
        align: 'right', 
        color: 'black', 
        x: 0, 
        format: '{point.name}%', 
        style: { 
         fontSize: '12px', 
         color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black', 
        } 
       }, 
       y: 10, 
       name: '<0.001', 
       color: 'white' 
      }, { 
       dataLabels: { 
        enabled: true, 
        defer: false, 
        align: 'right', 
        color: 'black', 
        x: 0, 
        format: '{point.name}%', 
        style: { 
         fontSize: '12px', 
         color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black', 
        } 
       }, 
       y: 10, 
       name: '<0.001', 
       color: 'white' 
      }, { 
       dataLabels: { 
        enabled: true, 
        defer: false, 
        align: 'right', 
        color: 'black', 
        x: 0, 
        format: '{point.name}%', 
        style: { 
         fontSize: '12px', 
         color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black', 
        } 
       }, 
       y: 10, 
       name: '<0.001', 
       color: 'white' 
      }], 
      showInLegend: false, 
      pointWidth: 15, 
     }, { 
      data: [2, 2, 3, 2, 1, 1, 1, 1, 1], 
      showInLegend: false, 
      pointWidth: 15, 
     }] 
    }); 
}); 

缺少的邊界在底部的顏色特別明顯,但是當打印它,它是對所有的人都看到。

回答

3

邊框實際上是存在的,但隱藏在軸分鐘之外,看來似乎。

如果您設置最低則爲零略顯不足,並設置startOnTick爲false,邊框會出現:

yAxis: { 
min:-.1, 
startOnTick:false, 
} 
+0

真棒。謝謝。 – 2014-11-06 20:31:12

相關問題