如何在dimple js中创建气泡饼图
[英]how to create bubble pie chart in dimple js
问题描述
I'm new to dimple and I'm having trouble creating a bubble pie chart.
我刚接触酒窝，在创建气泡饼图时遇到了问题。 I would like each bubble to also be a pie chart that shows regional percentages.我希望每个气泡也是显示区域百分比的饼图。 I tried inserting the pie chart with myChart.addSeries(["North America", "Latin America"], dimple.plot.pie);我尝试使用myChart.addSeries(["North America", "Latin America"], dimple.plot.pie);插入饼图myChart.addSeries(["North America", "Latin America"], dimple.plot.pie); but it didn't work.但它没有用。 Any suggestions?有什么建议吗？ Thank you!谢谢！
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>
2 个解决方案
解决方案1
1 2016-10-09 15:08:16
This intrigued me so I've created a demo of it using RGraph.这引起了我的兴趣，所以我使用 RGraph 创建了它的演示。 It's not an insignificant amount of code - but it does do the job and it's available in the download as这不是一个微不足道的代码 - 但它确实完成了这项工作，并且可以在下载中获得
demos/scatter-bubble-pie-chart.html
You can download it here:你可以在这里下载：
https://www.rgraph.net/download.html#stable https://www.rgraph.net/download.html#stable
解决方案2
0 2016-10-21 01:33:34
From the dimples-master download there is a demo for pie bubbles (code below).从酒窝大师下载有一个关于馅饼气泡的演示（下面的代码）。 or look here for the demo http://dimplejs.org/examples_viewer.html?id=pie_bubble或在此处查看演示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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.