带有Dimple.js和D3.js的简单栏图

我正在研究带有Dimple.js的非常基本的条形图。当我在浏览器中渲染时，它仅显示轴和轴标签，但没有条。任何帮助都赞赏。我正在使用python创建局部主机。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link href="main.css" rel="stylesheet">
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="http://dimplejs.org/dist/dimple.v2.0.0.min.js"></script>
  </head>
  <body>
    <h2> Rise of the Machines: R&D on Unmanned Aerial Aircrafts</h2>
    <script src="index.js"></script>
  </body>
</html>

index.js

function draw(data) {
      /*
        D3.js setup code
      */
    var margin = 75;
    var width = 1400 - margin;
    var height = 600 - margin;
      /* Find body tag, append svg, and add chart group tag*/
    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); 
      x = myChart.addCategoryAxis("x", "");
      y = myChart.addMeasureAxis("y", "Share of Global Spending (%)");
      myChart.addSeries(null, dimple.plot.bar);
      myChart.draw();
    };
d3.csv("data.csv", draw);

您不会告诉您在哪里获取数据：

  x = myChart.addCategoryAxis("x", "");     //<---- X values
  y = myChart.addMeasureAxis("y", "Share of Global Spending (%)"); // <--- Y values

示例

var data = [
  { "Word":"Hello", "Awesomeness":2000 },
  { "Word":"World", "Awesomeness":3000 }
];
chart.addCategoryAxis("x", "Word");
chart.addMeasureAxis("y", "Awesomeness");

另一个示例

var data = [
  { "data1":"Hello", "data2":2000 },
  { "data1":"World", "data2":3000 }
];
chart.addCategoryAxis("x", "data1");
chart.addMeasureAxis("y", "data2");

您必须从CSV列名称指向数据原点。与您的CSV：

Xdata, Yvalue
1,10
2,20
3,30
4,20

您的代码：

chart.addCategoryAxis("x", "Xdata");
chart.addMeasureAxis("y", "Yvalue");

在Dimple网站上，似乎建议使用.TSV（TAB分离值）而不是逗号分离的值。

这是从网站获取的样本（垂直）条形图

<html>
<div id="chartContainer">
  <script src="/lib/d3.v3.4.8.js"></script>
  <script src="http://dimplejs.org/dist/dimple.v2.2.0.min.js"></script>
  <script type="text/javascript">
    var svg = dimple.newSvg("#chartContainer", 590, 400);
    d3.tsv("/data/example_data.tsv", function (data) {
      var myChart = new dimple.chart(svg, data);
      myChart.setBounds(60, 30, 510, 330)
      myChart.addCategoryAxis("x", ["Price Tier", "Channel"]);
      myChart.addMeasureAxis("y", "Unit Sales");
      myChart.addSeries("Channel", dimple.plot.bar);
      myChart.addLegend(65, 10, 510, 20, "right");
      myChart.draw();
    });
  </script>
</div>
</html>

希望这将指导您朝正确的方向。

相关内容

最新更新

热门标签：