作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我想要实现这样的目标。
这是我到目前为止所拥有的:
Highcharts.chart('container', {
chart: {
type: 'pie'
},
title: {
text: 'Browser market share, January, 2018'
},
subtitle: {
text: `<div>80%</div> of Total`,
align: "center",
verticalAlign: "middle",
style: {
"fontSize": "7px",
"textAlign": "center"
},
x: 0,
y: -2,
useHTML: true
},
plotOptions: {
pie: {
shadow: false,
center: ["50%", "50%"],
dataLabels: {
enabled: false
},
states: {
hover: {
enabled: false
}
},
size: "45%",
innerSize: "95%",
borderColor: null,
borderWidth: 8
}
},
tooltip: {
valueSuffix: '%'
},
series: [{
y: 80,
color: {
linearGradient: {
x1: 0,
x2: 0,
y1: 0,
y2: 1
},
stops: [
[0, "#000"],
[1, "#b0bfc6"]
]
},
name: "Speed"
},
{
y: 20,
color: "#000",
name: "Non Prioritised"
}],
});
这是 fiddle : https://jsfiddle.net/gm8krq9L/
但是我无法让不同的颜色在图表上显示进度效果。我看到有一种类型称为:chart:solidgauge
,但是我的应用程序不支持,因为我必须包含solidgauge 文件才能加载这种图表。有没有办法使用饼图类型来实现此目的?
谢谢
最佳答案
您想要的称为圆环图图表。我已经为这样的图表做了一个例子,是不是类似 this example你要?
无论如何,here's a working example with your fiddle .
数据与您使用的数据类似:
series: [{
innerSize: '80%',
data: [{
name: 'Speed',
y: 80,
color: '#e7eaeb'
}, {
name: 'Non Prioritised',
y: 20,
}]
}],
关于javascript - 如何使用 highcharts 显示圆形进度饼图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60001182/
有人可以帮我理解为什么我的饼图百分比计算不正确吗?看截图: 根据我的计算,如 RHS 上所示,支出百分比应为 24.73%。传递给 Highcharts 的值如下:- 花费:204827099.36-
我正在制作圆环饼图。 我设置数据的颜色并获取钻取(它是保存外部切片的数据和配置的对象)切片的颜色为同一组颜色。我想设置要在向下钻取对象中使用的不同颜色数组。请参阅附图(外层切片有两种颜色:橙色和透明)
我是一名优秀的程序员,十分优秀!