Удалите пробелы над одним стеклом в CanvasJS

Question

Я создал горизонтальную стеклянную панель, используя CanvasJS. Но масштабирование беспокоит меня.

Если вы посмотрите на http://www.vandeel.com/dashboard/canvasjs.html Я создал примеры; 1 с высотой 300px и 1 с высотой 100px. Первый результат во множестве пробелов над баром, второй - нечитабельный. Вот моя скрипка: http://jsfiddle.net/canvasjs/QwZuf/

Как создать читаемое решение с одной решеткой высотой 100 пикселей?

С наилучшими пожеланиями, Martijn

HTML

<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart --> 

<div id="budgetbar" style="height: 300px; width: 100%;"></div> 

Javascript

var chart = new CanvasJS.Chart("budgetbar", 
{ 
    animationEnabled: true, 
    axisX: {  
    interval: 0, 
    minimum: 0, 
    maximum: 0, 
    indexLabelFontSize: 50 
    }, 
    axisY: {  
    interval: 10000, 
    minimum: 0, 
    maximum: 105000, 
    valueFormatString: "€ #,###,###", 
    gridThickness: 0, 
    gridColor: "#ffffff", 
    tickLength: 3, 
    indexLabelFontSize: 50 
    }, 
    data: [ 
    {   
    type: "stackedBar", 
    name: "Verbruikt", 
    showInLegend: "false", 
    dataPoints: [ 
     { x:1, y: 27000, color: "#cc33bb", toolTipContent: "€ 30.000 Spent" } 
     ] 
    }, 
    {   
    type: "stackedBar", 
    name: "Prognose V", 
    showInLegend: "false", 
    dataPoints: [ 
     { x:1, y: 500, color: "#fc9935", toolTipContent: "€ 27.500 Prognose V" } 
     ] 
    }, 
    {   
    type: "stackedBar", 
    name: "Verbruikt", 
    showInLegend: "false", 
    dataPoints: [ 
     { x:1, y: 2500, color: "#cc33bb", toolTipContent: "€ 30.000 Spent" } 
     ] 
    }, 
    {   
    type: "stackedBar", 
    name: "Budget", 
    showInLegend: "false", 
    dataPoints: [ 
     { x:1, y: 64500, color: "#EEEEEE", toolTipContent: "€ 100.000 Budget" } 
     ] 
    }, 
    { 
    type: "stackedBar", 
    name: "Prognose T", 
    showInLegend: "false", 
    dataPoints: [ 
     { x:1, y: 500, color: "#999900", toolTipContent: "€ 95.000 Prognose" } 
     ] 
    }, 
    {   
    type: "stackedBar", 
    name: "Budget", 
    showInLegend: "false", 
    dataPoints: [ 
     { x:1, y: 5000, color: "#EEEEEE", toolTipContent: "€ 100.000 Budget" } 
     ] 
    } 
    ] 
    , 
    legend:{ 
    cursor:"pointer", 
    itemclick:function(e) { 
     if(typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible){ 
     e.dataSeries.visible = false; 
     } 
     else { 
     e.dataSeries.visible = true; 
     } 

     chart.render(); 
    } 
    } 
}); 

chart.render(); 

Answer 1

Пробелы из-за максимум & промежуток что вы установили на осьY. Он должен работать нормально, когда вы удаляете то же самое. И вы можете сделать маленькие диаграммы читаемыми, установив labelFontSize оси и fontSize свойство легенды. Вот jsfiddle.

 axisX:{ 
      labelFontSize: 10 
     }, 
     axisY:{ 
      labelFontSize: 10 
     }