我正在尝试从有些日子来制作一个高图表响应的饼图。我正在开发一个中等规模的项目,有时很容易丢失概述。
我已经检查了这个:http://www.angulartutorial.net/2014/03/responsive-highchart.html但没有成功。
问题:当宽度为1920px时,高图看起来很好。 当它是900px时,那么饼图(系列 - >数据)的描述在浏览器之外,人们无法读取它,而且,馅饼对我来说很小。
问题:如何避免此行为?我想要一个更大的馅饼,并能够阅读(系列 - >数据)。
我提供以下代码:
我的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:
('#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
更新
答案 0 :(得分:0)
每次图表更改大小时,都会触发图表重绘事件。您可以检查该事件中图表的宽度,并为系列调用其他更新,因为如果您将标签的文本更改为带有<br>
标签的文本,那么饼图似乎很合适。如果您的问题更复杂,解决方案仍然类似 - 检查大小和更新图表。
更改了点名称的示例:http://jsfiddle.net/j86jkfvj/114/
宽度为&lt;时的系列更新示例900px:http://jsfiddle.net/dhwzw8qg/
答案 1 :(得分:0)
以下是我根据页面的resize事件重新绘制饼图的示例。我已经习惯了它并且效果很好:
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();
});