我正在使用dimplejs在我拥有的一些示例数据上创建折线图。

数据看起来像这样 (请参见html部分,它存储在data.tsv )。

d3.js = dimplejs.org/lib/d3.v3.4.8.js

酒窝代码是:

<head>
  <script src="d3.js"></script>
  <script src="http://dimplejs.org/dist/dimple.v2.1.2.min.js"></script>
</head>
<body>
  <script type="text/javascript">


 // Pass in an axis object and an interval.
 var cleanAxis = function (axis, oneInEvery) {
     // This should have been called after draw, otherwise do nothing
     if (axis.shapes.length > 0) {
         // Leave the first label
         var del = false;
         // If there is an interval set
         if (oneInEvery > 1) {
             // Operate on all the axis text
             axis.shapes.selectAll("text")
             .each(function (d) {
                 // Remove all but the nth label
                 if (del % oneInEvery !== 0) {
                     this.remove();
                     // Find the corresponding tick line and remove
                     axis.shapes.selectAll("line").each(function (d2) {
                         if (d === d2) {
                             this.remove();
                         }
                     });
                 }
                 del += 1;
             });
         }
     }
 };

    var svg = dimple.newSvg("body", 800, 600);

    d3.tsv("data.tsv", function (data) {
        var myChart = new dimple.chart(svg, data);

        myChart.setBounds(60, 30, 505, 305);
        var x = myChart.addCategoryAxis("x", "Month");
        x.addOrderRule("Date");
        var y  =myChart.addMeasureAxis("y", "Returns");
        y.overrideMax = 200;
        myChart.addSeries("Name", dimple.plot.line);
        myChart.addLegend(60, 10, 500, 20, "right");


        myChart.draw();

        cleanAxis(x, 20);


    });
    /*var data = [
      { "Word":"Hello", "Awesomeness":2000 },
      { "Word":"World", "Awesomeness":3000 }
    ];*/
    /*var chart = new dimple.chart(svg, data);
    chart.addCategoryAxis("x", "Word");
    chart.addMeasureAxis("y", "Awesomeness");
    chart.addSeries(null, dimple.plot.bar);
    chart.draw();*/
  </script>
</body>

最终图表如下所示: 在此处输入图片说明

问题是:

为什么数字不匹配? 为什么数据末尾会出现大幅下降? 数据的表示形式似乎不一致,并且该库没有发布带有此类错误的方法。

谢谢你的指点

===============>>#1 票数:1

因为您是在x轴上绘制“月”字段,所以酒窝会汇总每个月的所有回报,因此,这些实际上就是您所看到的月份总数(末尾的下降可能是由于月份不足所致)。

我认为使用x上的时间轴可能会获得更大的成功。 您也将不需要清洁轴代码。 试试这个(我还没有测试这段代码,但是应该很接近):

var svg = dimple.newSvg("body", 800, 600);

d3.tsv("data.tsv", function (data) {
    var myChart = new dimple.chart(svg, data);
    myChart.setBounds(60, 30, 505, 305);
    myChart.addTimeAxis("x", "Date", "%m/%d/%Y", "%b-%Y");
    myChart.addMeasureAxis("y", "Returns");
    myChart.addSeries("Name", dimple.plot.line);
    myChart.addLegend(60, 10, 500, 20, "right");
    myChart.draw();
});

  ask by jason m translate from so

未解决问题?本站智能推荐:

1回复

使用Dimple.js渲染图表时出现问题

我正在尝试用Dimple制作图形。 必须以一张图形显示日落和日出。 我一点都不明白 请参阅下面的代码。 我不明白如何在一个图形中获得多个系列。 在我看来,使用addTimeAxis方法似乎是合乎逻辑的,但是在许多示例中,在日期上我也看到它们使用了addCategoryAxis方
2回复

在jquery之后绘制dimple.js图表​​时,Firefox中的NS_ERROR_FAILURE

我正在试图绘制一个dimple.js svg条形图,它嵌套在jquery-ui标签和accordeon中,我将其用于我的网站布局,我非常绝望。 在Chrome和IE中一切正常,但FF不断抛出NS_ERROR_FAILURE异常。 这是代码片段: 我意识到这个问题与jquery和绘图函
2回复

获取dimple.js图表

我是D3的新手,并认为dimple.js是一个简单的起点。 但是,我无法在浏览器[Chrome,Firefox]中显示任何示例。 例如,此条形图不产生任何结果: 我已经下载了d3js库,并将其保存在与html文件相同的目录中。 数据文件的路径已检查。 我究竟做错了什么?
1回复

选择新选项时更新dimple.js图表

问题是代码除了现有图表外还想添加新图表。 单击新选项后如何更新图表。
2回复

dimple.js图表​​中图表和轴的标题

如何在dimple.js图表​​中添加标题? 我想更新我的图表和轴的标题。 我正在使用dimple.js。 请指教。
1回复

dimple.js示例图表未加载

我无法从dimple.js加载以下图表的示例代码: http ://dimplejs.org/advanced_examples_viewer.html?id=advanced_storyboard_control 我所做的唯一更改是将其另存为.csv而不是.tsv。 代码(index.
1回复

在Dimple.JS图表上自定义颜色

我想改变这张图表上条形的颜色,并将它们从蓝色变为橙色。 有没有人有关于如何更改/替换修改它的CSS的提示?
1回复

dimple.js绘制错误的值

我们正在尝试开发一个图表,以绘制天气文件及其相应的相对湿度和温度值。 到目前为止,该图表可以正确生成自身,并根据您所在的位置绘制当前的天气数据,但是它并未绘制当前位置的典型年度天气数据。 正确的数组已写入控制台,但是当移交给酒窝进行绘制时,最终在图表上显示的数据与登录到控制台的数据不同。
1回复

dimple.js或d3.js-在svg元素底部绘制图表图例

我试图弄清楚如何使我的图例出现在图表的底部,但没有运气。 在下面的代码中,由于我的图表的高度为600,我认为我可以简单地为Y坐标添加一个偏移量600,这样就可以解决问题。 但是不起作用。 有谁知道如何使用dimple.js或d3.js解决此问题? 如果我不必对这些值进行硬编码,而是
1回复

选择下拉条件时Dimple.js更新图表

我是D3.js和酒窝的新手。 我已经在Dimple.js图表​​上工作了几周了。 直到现在,酒窝对我来说还是很棒的。 我正在为图表创建过滤条件。 因此,我使用了引导程序来创建下拉菜单。 在此处创建示例, 这是我想要达到的目标,在“ 大陆 ”下拉菜单中,如果选择“ 欧洲”或“ 中东”