首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >配置饼图以使用最小的空间,并且从不隐藏标签

配置饼图以使用最小的空间,并且从不隐藏标签
EN

Stack Overflow用户
提问于 2016-03-07 04:22:45
回答 1查看 583关注 0票数 0

我正在尝试配置饼图,以使用最小的空间。

  1. 我设置了固定直径(圆,而不是容器),以便我可以比较两个图表。
  2. 没有设置固定的宽度和高度(容器),因为它可以隐藏标签(标签是动态的)。有时候它们可能会很长。每个图表都有不同的长度。

这是小提琴。请注意,有两个图表,一个在另一个下面。

这是我的代码:

代码语言:javascript
运行
AI代码解释
复制
$(function ()
{
  draw('container1');
  draw('container2');
  function draw(id)
  {
      $('#' + id).highcharts(
      {
          chart: {
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false,
                    type: 'pie'
                },
          title:{ text: null },
          legend: { enabled: false },
          credits: { enabled: false },
          tooltip: { pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' },
          plotOptions: {
                          pie: {
                                  size: 100,
                                  allowPointSelect: true,
                                  cursor: 'pointer',
                                  dataLabels: {
                                      enabled: true,
                                      format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                                      style: {
                                          color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                                      }
                                  }
                              }
                      },
          series: [/* data */]
      });
  }
});

当前问题:

  1. 图表周围有一些未使用的空间(灰色)。
  2. 右手边,标签的某些部分是隐藏的,即使左边有可用的空间。

编辑1:在api文档中,如果没有在容器元素上设置,它似乎使用默认的高度400px和宽度600px。有没有办法指示它使用最小的宽度和高度?

EN

回答 1

Stack Overflow用户

发布于 2016-03-07 05:10:41

原因2:饼形图的大小,如果你增加大小,你就不会看到它。

原因3:如果设置图表的大小,高图表不会自动重新显示图表,而图表的中心将是div的中心,这导致了标签的切断。如果不设置大小,就会重新输入图表以容纳绘图区域中的所有标签。

尝试使用minSize而不是大小。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/35843662

复制
相关文章
html5设置table样式_原生js添加样式
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
全栈程序员站长
2022/11/05
14.7K0
【HTML5】HTML5 新增 input 表单 ( 邮箱输入表单 | 网址输入表单 | 日期输入表单 | 时间输入表单 | 电话输入表单 | 搜索栏输入表单 | 颜色选择器输入表单 )
一、HTML5 新增 input 表单 ---- HTML5 新增 input 表单 : 邮箱输入表单 : 必须输入邮箱 , 如果输入格式错误 , 提交时会在对话框中报错 ; <input type="email" /> URL 输入表单 : 只能输入网址 , 格式错误会在对话框中报错 ; <input type="url" /> 日期输入表单 : 右侧的下拉菜单选择日期 ; 如果在手机中打开 , 会弹出手机中自带的日期选择对话框 ; <input type="date" /> 时间输入表
韩曙亮
2023/04/24
3.4K0
【HTML5】HTML5 新增 input 表单 ( 邮箱输入表单 | 网址输入表单 | 日期输入表单 | 时间输入表单 | 电话输入表单 | 搜索栏输入表单 | 颜色选择器输入表单 )
EasyNVR前端构建之输入框样式的调整
起初我们的界面设计是为了满足功能的需求就是 ,用户可以输入激活码提交,完成永久授权。 在实际的应用过程中我们发现由于输入框自身大小的原因,我们的机器码有事无法完全展示给用户,不方便用户的自我检查激活码是否准确。因此我们考虑使用可以方便拉伸改变大小的输入框。
EasyNVR
2020/04/23
9790
EasyNVR前端构建之输入框样式的调整
WordPress 后台样式:输入框 input class
我们在 WordPress 后台创建表单的时候,可以使用一些预定义好的 class 来定义输入框的宽度,而不需自己写样式,下图就是常用的输入框样式的效果:
Denis
2023/04/14
7400
WordPress 后台样式:输入框 input class
bootstrap 输入框组 常用搜索框样式
div input-group span input-group-addon <div style="padding: 100px 100px 10px;"> <form class="bs-example bs-example-form" role="form"> <div class="input-group"> <span class="input-group-addon">@</span> <input type="text" class="form-control" placeholder="twitterhandle"> </div> <div class="input-group"> <input type="text" class="form-control"> <span class="input-group-addon">.00</span> </div> <div class="input-group"> <span class="input-group-addon">$</span> <input type="text" class="form-control"> <span class="input-group-addon">.00</span> </div> </form> </div>
用户5760343
2019/07/05
3.1K0
bootstrap 输入框组  常用搜索框样式
html5数字和颜色输入框
效果:http://hovertree.com/code/html5/rxujb6g8.htm
全栈程序员站长
2022/07/15
2.6K0
防止vue文件中的样式出现‘污染’情况(html5 scoped特性)
在vue中,如果把样式写在vue文件的 style中,可能会出现样式污染的情况,这是要把写样式的标签
lin_zone
2018/08/15
8760
DataList:HTML5中的input输入框自动提示利器
DataList的作用是在你往input输入框里输入信息时,根据你敲进去的字母,自动显示一个提示下列列表,很像百度或谷歌的搜索框的自动提示,在飞机票火车票的搜索页面上也有这样的效果。它是HTML5里新增的一个非常有用的元素。
ZhangXianSheng
2019/05/28
3.5K0
Excel实战技巧66:创建向导样式的数据输入窗体4
在HRWizard用户窗体中输入的一些数据是通过组合框控件显示给用户的。HRWizard工作簿文件包含一个名为ListMgr的工作表,其中包含每个列表的数据,这些数据存储在ListMgr工作表的命名区域。
fanjy
2019/12/10
1.3K0
Excel实战技巧66:创建向导样式的数据输入窗体4
Excel实战技巧66:创建向导样式的数据输入窗体3
上文中,我们完成了用户窗体界面的设计。接下来,设置一些类来使用户窗体工作。在一开始,你可能会认为一个与数据记录相联系的类就满足要求了,但我们将在定义类时分解功能,设计一两个类帮助定义向导步骤。最终,将实现一个灵活的向导应用程序,提供非常容易修改步骤的顺序的能力,甚至添加一个步骤也相当简单。
fanjy
2019/12/10
6860
Excel实战技巧66:创建向导样式的数据输入窗体3
Excel实战技巧66:创建向导样式的数据输入窗体2
4.在用户窗体顶部添加标签,将其Caption属性设置为:MyCompany– HRWizard,设置字体为大尺寸,例如18pt。
fanjy
2019/12/10
1K0
Excel实战技巧66:创建向导样式的数据输入窗体2
Excel实战技巧66:创建向导样式的数据输入窗体6
运行用户窗体,我们在向导中的每一界面输入数据,并将其保存到EmpData工作表中。
fanjy
2019/12/11
6900
Excel实战技巧66:创建向导样式的数据输入窗体6
Excel实战技巧66:创建向导样式的数据输入窗体1
引言:本文来源于Jim DeMarco的《Pro Excel 2007 VBA》第4章的示例,详细讲解了如何使用用户窗体来制作一个向导样式的数据输入窗体,非常适合于学习使用VBA来创建用户窗体的知识和技巧,也为制作向导样式的用户窗体界面提供了参考模板。
fanjy
2019/12/06
1.2K0
Excel实战技巧66:创建向导样式的数据输入窗体5
到目前为止,我们已经完成了最艰难的工作。接下来,我们来编写用户窗体代码,将已完成的对象放进HRWizard用户窗体里并使这些对象工作。
fanjy
2019/12/11
1.7K0
Excel实战技巧66:创建向导样式的数据输入窗体5
HTML5 - 虚拟键盘出现挡住输入框的解决办法
我们使用 H5 做移动 App,或者进行移动网站开发时。如果文本输入框在整个页面的下方,当我们点击输入框要输入文字时,系统弹出的虚拟键盘就会将输入框给挡住。(这个只有在Android 系统下会有这个问题,iOS 系统会自动将整个页面上移动。)
ZhangXianSheng
2019/05/28
2.2K0
HTML5 中 input 如何实现只能输入浮点数
我们知道 HTML5 中的 input 标签支持 number 的类型,支持只能输入数字:
Denis
2023/04/14
1.1K0
IOS应用提交所需的ICON
如果提交的ipa包中,未包含必要的Icon就会收到类似的通知,为什么偏偏是Icon-76呢?
meteoric
2018/11/19
8690
怎样快速搜索自己所需的资料?
摘要:我不敢保证现在100%的大学生不会使用互联网快速搜索自己所需的资料,但我绝对敢保证有70%~90%大学生不会使用此方法进行快速搜索自己所需的资料。本文以百度为例,分享三个重要技巧。 一、关键词:
用户1756920
2018/06/20
1.6K0
企业面试题: HTML5中新的输入类型属性你知道哪些
search:用于搜索域,比如站点搜索或 Google 搜索,域显示为常规的文本域。
舒克
2019/08/09
6240
软件测试所需要掌握的技能
1.在测试中最重要的文档,他是测试工作的核心,是一组在测试时输入输出的标准,是软件需求的具体对照。编写测试用例,是测试人员的基本功,真正能写好的人并不多。
用户7880705
2020/12/28
1K0

相似问题

PHP:类中的静态只读属性

31

如何在Javascript类中声明只读静态属性?

20

添加静态只读属性时导致错误的静态常量类

12

如何重置只读静态属性?

12

C#中的静态只读和静态只读

50
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档