用于在浏览器上显示实时数据的空心饼图
A Hollow Pie Chart for showing Live Data on Browsers
我的网站上有一个配置文件页面,我想要一个空心饼图,就像下面的链接中一样,我想通过它显示完成配置文件的百分比。百分比将显示在中心,饼图将只有两种颜色。
访问图像链接http://www.telerik.com/ClientsFiles/392888_hollow.png
我所做的,我使用谷歌图表和代码是:
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Profile');
data.addColumn('number', 'Percentage');
data.addRows([
['Profile Complete', 3],
['Profile Incomplete', 1]
]);
// Set chart options
var options = {'title':'Profile Complete',
'width':400,
'height':300};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
<!--Div that will hold the pie chart-->
<div id="chart_div"></div>
但我得到的是一个完整的饼图,而不是一个空心的,所以有人能帮助我创建一个空心饼图吗。我有一个计算数据的算法,所以你可以使用伪数据。
欢迎任何形式的帮助或指导。
谢谢。。。
也许您可以尝试将参数pieHole添加到您的选项对象中,如下所述:https://developers.google.com/chart/interactive/docs/gallery/piechart#donut
这是我的问题的答案,包括我使用图像URL来获取图像,并在代码中的"img"标记中使用该图像。
访问:https://chart.googleapis.com/chart?cht=pc&chco=FFFFFF,FFFFFF;chd=t:-1|-1|-1|1|52,48&chs=122x122&chp=4.7
你会得到我想要的输出,你可以玩URL,老实说,这是一个破解,不是一个合适的解决方案,因为谷歌没有提供在URL中使用的饼孔属性。
欢迎提出任何问题。
谢谢。
相关文章:
- 用程序搜索JQuery数据表中的文本
- 要求输入在数据列表中
- 正在将数据主题添加到所有项目
- 函数参数中的数据与指定变量之间的任何性能差异
- 在VanillaJS中模拟模型双向数据绑定
- CSS-如何定位内容数据标题
- 使用电话间隙在Android应用程序中显示SQL Lite的数据
- 无法在数据endVal中设置值=“”;{{ucount}}”;使用Angular JS的CountUp
- 序列化数据属性中对象的最可靠方法
- 如何将JSON数据导入我的ejs模板
- 不显示带有本地json文件数据的谷歌地图脚本
- 如何将json数据显示为html
- 画布数据到图像
- 使用jquery将mysql数据获取到新的表行中
- 使用html中的外部javascript进行数据验证
- 有时数据是't显示在浏览器中
- React中的数据集表示
- Angular只从数组中获取所需的数据
- 无法将数据从firebase获取到我的html页面
- 用于在浏览器上显示实时数据的空心饼图