收缩酒吧的大小，简单的条形图

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则应自动添加...（不关注右侧留下的空间）

来源

2014-12-03 xyz

有没有HTML和CSS你没有显示，请粘贴在你的问题相关的代码（链接可以变坏，所以所有的信息应该在你的问题）。 – 2014-12-03 15:58:35

使用graph.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/

来源

2014-12-03 21:26:28 martynasma

辉煌！ :)感谢你。一个更小的查询可以更改条的颜色。如果不可能，那么是否有可能为每个图（我的意思是现在它只有一个图，并假设我会在其下面再添加另一个图） – xyz 2014-12-04 07:55:17

您是否想要为每个列单独设置颜色？您可以通过在数据中设置一些字段来实现，比如说“color”，并指定哪个数据字段包含填充颜色：graph.fillColorsField ='color' – martynasma 2014-12-04 19:53:23

收缩酒吧的大小，简单的条形图

回答

相关问题