как создать круговую диаграмму пузыря в ямочке js

Я новичок в ямочке, и у меня возникли проблемы с созданием круговой диаграммы. Я бы хотел, чтобы каждый пузырь также был круговой диаграммой, показывающей региональные проценты. Я попытался вставить круговую диаграмму с myChart.addSeries(["North America", "Latin America"], dimple.plot.pie);, но это не сработало. Какие-либо предложения? Спасибо!как создать круговую диаграмму пузыря в ямочке js

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>

источник

2016-10-07 Moiz Kapadia

Думаю, будет лучше, если вы сможете поделиться своими данными с нами. Также будет полезно обновление Plunker. – mtkilic

был бы рад сделать это. как я могу поделиться своими данными? –

Вы можете создать рабочий код [ЗДЕСЬ] (http://plnkr.co) или [link] (http://jsbin.com/?html,js,output) – mtkilic

Это заинтриговало меня, так что я создал демо его с помощью RGraph. Это не незначительное количество коды - но это сделать работу:

http://www.rgraph.net/demos/scatter-bubble-pie-chart.html

источник

2016-10-09 15:08:16 Richard

впечатляет! всегда здорово видеть другие библиотеки, кроме ямочки. я уверен, что это будет полезно для других зрителей! –

Из ямки-мастер загрузки есть демо пузырьки секторных (код ниже). или посмотрите здесь демо-версию 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>

источник

2016-10-21 01:33:34 Rob

как создать круговую диаграмму пузыря в ямочке js

ответ

Смежные вопросы