Question

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

如果你期待http://www.vandeel.com/dashboard/canvasjs.html我创造了一些例子; 1高300像素，高1高100像素。第一个导致条形图上方有很多空白，第二个是不可读的。这是我的小提琴：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

空白是因为最大＆amp;您在axisY上设置的区间。当你删除它时它应该工作正常。您可以通过设置轴的labelFontSize和图例的fontSize属性来使小图表可读。这是jsfiddle。

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

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

1 个答案: