如何创建气泡饼图在酒窝js
how to create bubble pie chart in dimple js
我是新手,我在创建气泡饼图时遇到了麻烦。我希望每个泡沫也是一个饼状图,显示区域百分比。我试着用myChart.addSeries(["North America", "Latin America"], dimple.plot.pie);
插入饼状图,但它不起作用。有什么建议吗?谢谢你!
function draw(data) {
/*
D3.js setup code
*/
"use strict";
var margin = 75,
width = 1400 - margin,
height = 600 - margin;
var svg = d3.select("body")
.append("svg")
.attr("width", width + margin)
.attr("height", height + margin)
.append('g')
.attr('class','chart');
/*
Dimple.js Chart construction code
*/
var myChart = new dimple.chart(svg, data);
myChart.addCategoryAxis("x", "Target Date");
myChart.addCategoryAxis("y", "Target Reduction");
myChart.addMeasureAxis("z", "Number of Cities");
myChart.addSeries(
["Cities",
"North America",
"Latin America"],
dimple.plot.bubble);
//myChart.addSeries(["North America", "Latin America"], dimple.plot.pie);
myChart.addLegend(180, 10, 360, 20, "right");
myChart.draw();
/*
Add horizontal line at 50%
*/
svg.append("line")
.attr("x1", margin+65)
.attr("x2", 1250)
.attr("y1", 325)
.attr("y2", 325)
.style("stroke", "red")
.style("stroke-dasharray", "3");
/*
Add horizontal line at 85%
*/
svg.append("line")
.attr("x1", margin+65)
.attr("x2", 1250)
.attr("y1", 180)
.attr("y2", 180)
.style("stroke", "red")
.style("stroke-dasharray", "3");
/*
Add chrt title
*/
svg.append("text")
.attr("x", myChart._xPixels() + myChart._widthPixels() / 2)
.attr("y", myChart._yPixels() - 20)
.style("text-anchor", "middle")
.style("font-family", "sans-serif")
.style("font-weight", "bold")
.style("font-size", "20px")
.text("Emissions Targets set by CDP Cities");
};
d3.csv("data.csv", draw);
<style></style>
<body></body>
这引起了我的兴趣,所以我用RGraph创建了一个演示。这不是一个微不足道的代码量-但它确实完成了工作,并且可以在下载
中获得。demos/scatter-bubble-pie-chart.html
你可以在这里下载:
https://www.rgraph.net/download.html稳定
从dimples-master下载中有一个饼状气泡的演示(代码如下)。或者在这里查看演示http://dimplejs.org/examples_viewer.html?id=pie_bubble
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<div id="chartContainer">
<script src="/lib/d3.v3.4.8.js"></script>
<script src="/dist/dimple.v2.2.0.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("/data/example_data.tsv", function (data) {
data = dimple.filterData(data, "Date", "01/12/2012");
var myChart = new dimple.chart(svg, data);
myChart.setBounds(60, 30, 500, 330)
myChart.addMeasureAxis("y", "Unit Sales Monthly Change");
myChart.addMeasureAxis("x", "Price Monthly Change");
myChart.addMeasureAxis("p", "Operating Profit");
myChart.addMeasureAxis("z", "Operating Profit");
myChart.addSeries(["Owner", "Channel"], dimple.plot.pie);
myChart.addLegend(200, 10, 360, 20, "right");
myChart.draw();
});
</script>
</div>
</html>
相关文章:
- 可以't让我的if语句处理js中的html表单输入
- 使用agility.js进行页面布局和合成
- 使用Clipboard.js复制span文本
- 使用JS如何动态更改显示的html文件中的文本背景颜色
- 强制模板刷新ember.js
- 如何编写HTML输入的JS内联
- Angular JS IE9 Hashbang url rewriting
- 使用JS将数组转换为json对象
- D3.js气泡图;t与AngularJS一起出现
- HERE 地图 (JS v3) - 将事件侦听器添加到信息气泡
- C3.js气泡图选择
- dc.js气泡图无法显示点
- 尝试在dc.js中使用x轴上的字符串值制作气泡图
- 如何用angular.js在jqplot中创建一个气泡图
- 如何创建气泡饼图在酒窝js
- 使用Ember组件中的Morris.js图,使用自定义对象从组件到控制器的气泡动作事件
- 在 Kartograph.js 中显示气泡
- 使用 d3.js 附加多个气泡云图
- 做骨干木偶.js父视图的气泡
- 改变c3.js散点图中气泡的大小