하이 차트에서 열 사이의 간격을 줄입니다

빨간 열 사이의 공간을 줄여야합니다. this code 하이 차트에서 열 사이의 간격을 줄입니다

$(function() { 
$('#container').highcharts({ 

    colors: ['#ba0000'], 
    chart: { 
     type: 'column', 
     spacingBottom: 10, 
     spacingTop: 30, 
     spacingLeft: 0, 
     spacingRight: 10, 

     style: { 
      fontFamily: 'MuseoSans-500', 
      fontSize: '14px'     
     }  

    }, 

    title: { 
     text: '' 
    }, 
    subtitle: { 
     text: '' 
    }, 
    xAxis: { 
     categories: [ 
      'YTD', 
      'QTD', 
      'Last Period' 
     ], 
     labels: { 
      style: { 
       fontSize:'14px' 
      } 
     }   
    }, 
    yAxis: { 
     min: 0, 
     title: { 
      text: '%' 
     }, 

     plotLines: [{ 
      color: '#0054a6', 
      width: 2, 
      value: 48, 
      dashStyle: 'Dash', 
     label : { 
        text : 'AVG' 
       }    
     }, 



     { 
      color: '#00ed99', 
      width: 2, 
      value: 65, 
      dashStyle: 'Dash', 
      label : { 
        text : 'GOAL', 

      } 


      }] 

    }, 



    credits: { 
     enabled: false 
    }, 
    tooltip: { 
     headerFormat: '<span style="font-size:1.1em">{point.key}</span><table>', 
     pointFormat: '<tr><td style="color:{series.color};padding:0"></td>' + 
      '<td style="padding:0"><b>{point.y:.1f}%</b></td></tr>', 
     footerFormat: '</table>', 
     shared: true, 
     useHTML: true 
    }, 
    plotOptions: { 
     column: { 

      pointPadding: 0, 
      borderWidth: 0, 
      groupPadding: 0, 
      pointWidth: 50, 
     } 
    }, 
    series: [{ 
     data: [57, 63, 62], 


    }] 
});

}}를 참조하십시오.

나는 Highcharts - How can I decrease space between categories?과 Space between columns에서 해결책을 시도했지만 제대로 작동하지 않았습니다. 나는 내가 무엇을 놓치고 있는지 너무 확신하지 못한다.

감사합니다.

출처

2014-10-01 square

당신은 완전히 그들 사이의 간격을 제거 할 등록 groupPadding

 plotOptions: { 
      series: { 
       pointPadding: 0, 
       groupPadding: 0, 
      } 
     },

이 필요합니다.

See the DEMO here

출처

2014-10-01 09:40:02

덕분에,하지만 녹색과 파란색에있는 두 개의 점선 플롯 라인을 중복됩니다. 공간을 줄이는 방법은 없지만 줄을 겹쳐서는 안됩니다. – square

정의한 값에 따라 @square 행이 poisitoned됩니다. 그래서 당신이 그들을 필요로한다면, 다른 값을 설정하십시오. –

이것은 정확히 내가 뭘 찾고 있었는지, 나는 마우스 오버가 거의 불가능했던 매우 얇은 기둥이있는 주식 차트를 가지고 있었다. 이것은 완벽했다! – Eko3alpha

하이 차트에서 열 사이의 간격을 줄입니다

답변

관련 문제