1

我使用 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();
4

1 回答 1

0

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

      axisX:{
          labelFontSize: 10
      },
      axisY:{
          labelFontSize: 10
      }
于 2015-08-18T14:02:11.143 回答