删除 CanvasJS 中单个堆叠条上方的空格

Question

我使用 CanvasJS 创建了一个水平堆叠条。但是缩放让我很困扰。

如果你看http://www.vandeel.com/dashboard/canvasjs.html I have created to examples; 1 with 300px height and 1 with 100px height. The first results in a lot of whitespace above the bar, the second is unreadable. Here is my fiddle: http://jsfiddle.net/canvasjs/QwZuf/

如何创建高度为 100 像素的可读的单条解决方案？

亲切的问候，马丁

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

空白是因为您在 axisY 上设置的 maximum & interval。当您删除它时它应该可以正常工作。您可以通过设置 labelFontSize of axis and fontSize property of legend. Here is a jsfiddle.

使小图表可读

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

删除 CanvasJS 中单个堆叠条上方的空格

Remove whitespace above a single stacked bar in CanvasJS

charts

canvasjs