缩小amcharts中简单条形图中的条形大小

xyz

http://www.amcharts.com/demos/simple-column-chart/#theme-none我正在关注此脚本

var chart = AmCharts.makeChart("chartdiv", {
    "type": "serial",
    "theme": "none",
    "dataProvider": [{
        "country": "USA",
        "visits": 2025
    }, {
        "country": "China",
        "visits": 1882
    }, {
        "country": "Japan",
        "visits": 1809
    }, {
        "country": "Germany",
        "visits": 1322
    }, {
        "country": "UK",
        "visits": 1122
    }, {
        "country": "France",
        "visits": 1114
    }, {
        "country": "India",
        "visits": 984
    }, {
        "country": "Spain",
        "visits": 711
    }, {
        "country": "Netherlands",
        "visits": 665
    }, {
        "country": "Russia",
        "visits": 580
    }, {
        "country": "South Korea",
        "visits": 443
    }, {
        "country": "Canada",
        "visits": 441
    }, {
        "country": "Brazil",
        "visits": 395
    }],
    "valueAxes": [{
        "gridColor":"#FFFFFF",
        "gridAlpha": 0.2,
        "dashLength": 0
    }],
    "gridAboveGraphs": true,
    "startDuration": 1,
    "graphs": [{
        "balloonText": "[[category]]: <b>[[value]]</b>",
        "fillAlphas": 0.8,
        "lineAlpha": 0.2,
        "type": "column",
        "valueField": "visits"      
    }],
    "chartCursor": {
        "categoryBalloonEnabled": false,
        "cursorAlpha": 0,
        "zoomable": false
    },
    "categoryField": "country",
    "categoryAxis": {
        "gridPosition": "start",
        "gridAlpha": 0,
         "tickPosition":"start",
         "tickLength":20
    },
    "exportConfig":{
      "menuTop": 0,
      "menuItems": [{
      "icon": '/lib/3/images/export.png',
      "format": 'png'     
      }]  
    }
});

当我删除2个国家/地区以外的所有数据(我的意思是2条)时,条的宽度会增加到整个页面的大小。

<html>
  <head>
    <script type="text/javascript" src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/serial.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/themes/none.js"></script>
    <script>
    var chart = AmCharts.makeChart("chartdiv", {
    "type": "serial",
    "theme": "none",
    "dataProvider": [{
        "country": "USA",
        "visits": 2025
    }, {
        "country": "China",
        "visits": 1882
    }],
    "valueAxes": [{
        "gridColor":"#FFFFFF",
        "gridAlpha": 0.2,
        "dashLength": 0
    }],
    "gridAboveGraphs": true,
    "startDuration": 1,
    "graphs": [{
        "balloonText": "[[category]]: <b>[[value]]</b>",
        "fillAlphas": 0.8,
        "lineAlpha": 0.2,
        "type": "column",
        "valueField": "visits"      
    }],
    "chartCursor": {
        "categoryBalloonEnabled": false,
        "cursorAlpha": 0,
        "zoomable": false
    },
    "categoryField": "country",
    "categoryAxis": {
        "gridPosition": "start",
        "gridAlpha": 0,
         "tickPosition":"start",
         "tickLength":20
    },
    "exportConfig":{
      "menuTop": 0,
      "menuItems": [{
      "icon": '/lib/3/images/export.png',
      "format": 'png'     
      }]  
    }
});
</script>
<style type="text/css">
#chartdiv {
    width       : 100%;
    height      : 500px;
    font-size   : 11px;
}   
</style>
  </head>
  <body>
    <div id="chartdiv"></div>
  </body>
</html>

我什至尝试删除CSS中的宽度100%,但没有成功。

我只想要一个数据,然后打印一个小(固定)尺寸的条形图。如果大于1,则应自动添加...(不关心右侧的剩余空间)

马丁纳斯马

您可以使用graph.fixedColumnWidth属性轻松地以相同的恒定像素宽度强制所有列。

以下是相关文档:

http://docs.amcharts.com/3/javascriptcharts/AmGraph#fixedColumnWidth

代码:

"graphs": [{
    "balloonText": "[[category]]: <b>[[value]]</b>",
    "fillAlphas": 0.8,
    "lineAlpha": 0.2,
    "type": "column",
    "valueField": "visits",
    "fixedColumnWidth": 50
}],

工作示例:http : //jsfiddle.net/amcharts/nctpzzbr/


如果您需要根据图表中元素的实际数量来增加/缩小图表容器,则它会更复杂,但也有可能。

为此,我们将使用“ AmCharts.addInitHandler”属性来设置我们自己的函数,以呈现图表之前执行函数

// this will get executed BEFORE chart is drawn
// we'll use it to modify the width of the chart area
AmCharts.addInitHandler(function(chart) {
    // total offsets reserved for margins
    var offsets = 100;

    // pixel value reserved for each category
    var categoryWidth = 80;

    // calculate width
    var width = offsets + chart.dataProvider.length * categoryWidth;

    // set container width
    document.getElementById("chartdiv").style.width = "" + width + "px";

    // since the chart is already build for the initial container size we need to
    // revalidate it's size. we'll delay a little bit the call to invalidateSize()
    // so that the chart elements are created first
    setTimeout(function () {
        chart.invalidateSize();
        document.getElementById("chartdiv").style.display = "block";
    }, 1);
}, ['serial']);

这是一个使用上述代码的工作示例:http : //jsfiddle.net/amcharts/tc3uf92e/

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章