gpt4 book ai didi

css - 如何从 highcharts 响应式制作饼图

转载 作者:行者123 更新时间:2023-12-02 04:46:53 25 4
gpt4 key购买 nike

几天以来,我一直在尝试从 highcharts 响应式制作饼图。我正在处理一个中等规模的元素,有时很容易丢失概述。

我已经检查过了:http://www.angulartutorial.net/2014/03/responsive-highchart.html但没有成功。

问题:当宽度为 1920px 时,highchart 看起来不错。
当它是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

更新:

Labels are hidden

最佳答案

每次图表更改大小时都会触发图表的重绘事件。您可以在该事件中检查图表的宽度并为系列调用额外的更新,因为如果您使用 <br> 将标签的文本更改为一个标签,那么馅饼似乎很合适。如果您的问题更复杂,解决方案仍然相似 - 检查大小并更新图表。

更改点名称的示例:http://jsfiddle.net/j86jkfvj/114/

宽度 < 900px 时系列更新的示例:http://jsfiddle.net/dhwzw8qg/

关于css - 如何从 highcharts 响应式制作饼图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32118711/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com