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

#javascript #charts #dimple.js

#javascript #Диаграммы #dimple.js

Вопрос:

Я новичок в dimple, и у меня возникли проблемы с созданием круговой диаграммы пузырьков. Я бы хотел, чтобы каждый пузырь также был круговой диаграммой, которая показывает региональные проценты. Я попытался вставить круговую диаграмму с 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>

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

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

3. Вы можете создать рабочий код ЗДЕСЬ или по ссылке

4. к сожалению, я не могу заставить плунжер работать, но данные и код here… plnkr.co/edit/o87vvK7OJsxNnRzrb4tE?p=preview

Ответ №1:

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

 demos/scatter-bubble-pie-chart.html

Вы можете скачать его здесь:

https://www.rgraph.net/download.html#stable

Ответ №2:

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