Highcharts set the min height for (column-stacked-and-grouped) chart.
2012-11-26 16:41
513 查看
The mian way.
1.use axis.translate function to
convert value to pixel and backward
pointto pixel:
plot_y = chart.yAxis[0].translate(point_y)
pixel
to point, simply add "true" as second parameter:
point_y
= chart.yAxis[0].translate(plot_y, true)
2.update([Mixed options], [Boolean redraw], [Mixed animation])
Update the point with new values.
Parameters
options: Number|Array|ObjectThe point options. If options is a single number, the point will be given that number as the y value.If it is an array, it will be interpreted as x and y values respectively. If it is an object, advanced options as outlined underseries.data
are applied.
redraw: Boolean
Defaults to
true. Whether to redraw the chart after the point is updated.If doing more operations on the chart, it is a good idea to set redraw to false and call
chart.redraw()after.
animation: Mixed
Defaults to true. When true, the update will be animated with default animationoptions. The animation can also be a configuration object with properties
durationand
easing.
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Highcharts Example</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript"> $(function () { var chart; //set minHeight. var minHeight = 10; $(document).ready(function() { chart = new Highcharts.Chart({ chart: { renderTo: 'container', type: 'column', events: { load: function(event) { var chart = this.series[0].chart; var series = chart.series; for(var i = 0; i < series.length; i++){ var serieData = series[i].data; console.log('series----------------------------------'+i+'-------------------------------------->'+series[i].name); for(var j = 0; j < serieData.length; j++){ var dragPoint = serieData[j]; console.log('series******'+ i +'serieData****************************************' + j); if(dragPoint){ console.log('dragPoint.x----'+dragPoint.x); console.log('dragPoint.y----'+dragPoint.y); console.log('barX----'+dragPoint.barX); console.log('plotY-----'+dragPoint.plotY); console.log('yBottom-----'+dragPoint.yBottom); console.log('chart.plotHeight----'+chart.plotHeight); console.log('shapeArgs.height---'+dragPoint.shapeArgs.height); console.log('shapeArgs.width---'+dragPoint.shapeArgs.width); console.log('shapeArgs.x---'+dragPoint.shapeArgs.x); console.log('shapeArgs.y---'+dragPoint.shapeArgs.y); //var series = dragPoint.series; var newX = dragPoint.x; var newY; if(dragPoint.y != 0 && dragPoint.shapeArgs.height < minHeight){ newY = dragPoint.series.yAxis.translate(minHeight, true); dragPoint.update([newX, newY], false); } } } } chart.redraw(); } } }, title: { text: 'Total fruit consumtion, grouped by gender' }, xAxis: { categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'] }, yAxis: { allowDecimals: false, min: 0, title: { text: 'Number of fruits' } }, tooltip: { formatter: function() { return '<b>'+ this.x +'</b><br/>'+ this.series.name +': '+ this.y +'<br/>'+ 'Total: '+ this.point.stackTotal; } }, plotOptions: { column: { stacking: 'normal' } }, series: [{ name: 'John', data: [5, 300, 400, 700, 20], stack: 'male' }, { name: 'Joe', data: [30, 40, 400, 200, 50], stack: 'male' }, { name: 'Jane', data: [20, 500, 60, 200, 100], stack: 'female' }, { name: 'Janet', data: [3, 0, 400, 400, 3], stack: 'female' }] }); }); }); </script> </head> <body> <script src="../../js/highcharts.js"></script> <script src="../../js/modules/exporting.js"></script> <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div> </body> </html>
相关文章推荐
- Get and Set Column/Row Names for Data Frames
- How to add a user and set environments for the user?
- The dplyr package has been updated with new data manipulation commands for filters, joins and set operations.(转)
- Configuring the Character Set and Collation for Applications
- High-Fidelity Pose and Expression Normalization for Face Recognition in the Wild
- java.lang.RuntimeException: Date pattern must be set for column update_time in the schema of component
- How to fix the issue that GEM_HOME and/or GEM_PATH not set issue for rvm in mac version 10.12
- Configuring the Character Set and Collation for Applications
- Setting the SPOOL option may allow recovery of LINE and COLUMN for error
- When the RTP port is set to 8005, why is 8006 used by RTP and 8007 for RTCP for all communications ?
- 扫描线算法的论文《The Intersections for a Set of 2D Segments, and Testing Simple Polygons》的部分翻译
- How to add a user and set environments for the us
- An explicit value for the identity column in table can only be specified when a column list is used and IDENTITY_INSERT is ON
- Set the Culture and UI Culture for C# Globalization
- The design and analysis of high frequency phased array coils for MRI
- To set the div position(used for DataGrid Imeplate Column with DropDownList item)
- Build a Custom RadioButton Cell and Column for the DataGridView Control
- PhantomJS: a new way for running Highcharts on the server side
- MOSS 2007 Publishing web site definition template – onet.xml – syntax for properties and getting the right content types
- Bjarne新文章《Evolving a language in and for the real world: C++ 1991-2006》的读后感