如何使Highcharts响应式饼图 [英] How to make a pie chart from highcharts responsive
问题描述
自几天以来,我一直在尝试使highcharts响应饼图.我正在做一个中等规模的项目,有时很容易丢失概述.
I am trying since some days to make a pie chart from highcharts responsive. I am working on a medium size project and sometimes it is easy to lose the overview.
我已经检查过: http://www.angulartutorial.net/2014/03/sensitive-highchart.html ,但没有成功.
I already checked this : http://www.angulartutorial.net/2014/03/responsive-highchart.html but no success.
问题:当宽度为1920px时,高图看起来不错. 当像素为900px时,饼图(系列->数据)的描述在浏览器外部,并且无法读取,而且饼图对我来说很小.
Problem: The highchart looks good when the width is 1920px. When it is 900px then the description of the pie (series -> data) is outside the browser and one can not read it, moreover, the pie is for me to small.
问题:如何避免这种行为?我想要一个更大的馅饼,并且能够读取(series->数据).
Question: How can I avoid this behaviour? I would like a bigger pie and be able to read the (series-> data).
我提供以下代码:
我的HTML代码是:
<div id="container-independency" >
<div id="independency" >
<div>Title plot</div>
<div style="margin-left: 2.8%; margin-top:1%; font-size: 24px;">Bla blablabla blab bl<span class="autarkie" > </span> % blabla = <strong> <span class="autarkie" >
</span> % blablabla blablabla</strong></div>
<div id="highcharts_container"></div>
</div>
</div>
CSS代码:
#container-independency{
width: 90%;
max-width: 1620px;
background-color: #b8860b;
clear: both;
padding: 1%;
display: none;
box-sizing: border-box;
}
#independency{
width: 80%;
margin-left: auto;
margin-right: auto;
padding: 1%;
background-color: #ffb6c1;
box-sizing: border-box;
}
#highcharts_container{
width: 100%;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
}
高位图:
('#highcharts_container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title:{
text:''
},
credits: {
enabled: false
},
navigation: {
buttonOptions: {
enabled: false
}
},
tooltip: {
pointFormat: '<b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.2f} %',
style: {
color: '#58585a',
fontFamily: 'klavika-web, sans-serif', fontSize: '12px'
}
}
}
},
series: [{
name: '',
data: [
['Property1aaa/Property2aaa/Property3aaaaaa', independency],
['More blablabla blablabla', 100-independency],
]
}]
});//highcharts_container
更新:
推荐答案
下面是一个示例,该示例基于页面的resize事件重新绘制饼图.我已经使用过并且效果很好:
Here's an example I found of redrawing the pie based on a resize event of the page. I've used it and works well:
HTML:
<div class="wrapper">
<div id="container" style="width:100%;"></div>
</div>
JS:
$(function () {
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Responsive Resize'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Firefox', 45.0],
['IE', 26.8],
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}]
});
function redrawchart(){
var chart = $('#container').highcharts();
console.log('redraw');
var w = $('#container').closest(".wrapper").width()
// setsize will trigger the graph redraw
chart.setSize(
w,w * (3/4),false
);
}
$(window).resize(redrawchart);
redrawchart();
});
这篇关于如何使Highcharts响应式饼图的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!