Question

我有一个原始数据集，如下所示......

  var dataSet3 = [
    { "Month": "January", "Date": "20150101", "Unit Sales": "3000", "Revenue": "2000" },
    //{ "Month": "January", "Date": "20150103", "Unit Sales": "3000", "Revenue": "2000" },
    { "Month": "April", "Date": "20150403", "Unit Sales": "500", "Revenue": "6000" },
    //{ "Month": "April", "Date": "20150403", "Unit Sales": "500", "Revenue": "6000" },
    { "Month": "May", "Date": "20150530", "Unit Sales": "3000", "Revenue": "2000" },
    { "Month": "June", "Date": "20150620", "Unit Sales": "1500", "Revenue": "39000" },
    { "Month": "July", "Date": "20150706", "Unit Sales": "2500", "Revenue": "6000" },
    { "Month": "February", "Date": "20150205", "Unit Sales": "2500", "Revenue": "5000" },
    { "Month": "March", "Date": "20150307", "Unit Sales": "1500", "Revenue": "6000" },
    { "Month": "August", "Date": "20150816", "Unit Sales": "2500", "Revenue": "20000" },
    { "Month": "September", "Date": "20150907", "Unit Sales": "1500", "Revenue": "6000" },
    { "Month": "October", "Date": "20151009", "Unit Sales": "500", "Revenue": "9000" },
    { "Month": "November", "Date": "20151120", "Unit Sales": "50", "Revenue": "15000" },
    { "Month": "December", "Date": "20151222", "Unit Sales": "2000", "Revenue": "7000" }
  ];

我的HTML看起来如下......

<div class="div_RootBody" id="root_div">
  <h3>Example 4</h3>
  <div id="chart4"></div>
</div>

My Dimple图表代码是：

  function draw2(selectString, data){

    //var svg2 = dimple.newSvg("#chart2", 690, 420); // width x height
    var svg2 = dimple.newSvg(selectString, 690, 420); // width x height
    var myChart = new dimple.chart(svg2);
    myChart.setBounds(60, 30, 505, 305);
    var x = myChart.addCategoryAxis("x", "Month");
    x.addOrderRule("Date");

    var y1 = myChart.addMeasureAxis("y", "Unit Sales");
    var y2 = myChart.addMeasureAxis("y", "Revenue");

    var line1 = myChart.addSeries("Sales", dimple.plot.line, [x,y1]);
    var line2 = myChart.addSeries("Gross Revenue", dimple.plot.line, [x,y2]);

    //line1.data = dataSet1;
    line1.data = data;
    line1.plot=dimple.plot.line;
    //line2.data = dataSet1;
    line2.data = data;
    line2.plot=dimple.plot.line;

    // Assign specific colors to lines
    myChart.assignColor("Sales", "blue");
    myChart.assignColor("Gross Revenue", "green");
    line1.lineMarkers = true;
    line2.lineMarkers = true;

    myChart.addLegend(180, 10, 260, 20, "right", line1);
    myChart.addLegend(180, 10, 360, 20, "right", line2);

    myChart.draw();

  };

并且，我使用行...

调用Dimple图表代码

draw2("#chart4", dataSet3);

当我以原始形式使用数据时，第2和第4个对象被注释掉，X轴正确排序......从1月到12月，看起来如下......

但是，如果我取消注释第2个和第4个对象并运行相同的代码，您会注意到虽然Y幅度值是正确的（它们是相加的），但是1月和4月的月份会移动到X轴，如下......

我的问题：为什么在我这几个月有多个数据条目时会发生这种情况，以及纠正它的最佳方法是什么，以便按照第一次和第一次的方式对它进行排序图表（1月，2月，3月，4月，5月等）？

Answer 1

原因是您已指定此排序规则：

x.addOrderRule("Date");

但是X轴值＆＃34; 1月＆＃34;和＆＃34;四月＆＃34;有两个不同的日期与他们相关。

相反，由于我们只谈了几个月，你可以将订购硬编码到几个月：

x.addOrderRule(["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]);

即使当月没有数据，这也有利于确保所有月份都出现在轴上。

警告：我之前没有对此进行过测试，甚至没有使用过Dimple，但他们{{3}}对此进行了描述。

如何更正D3 Dimple Category Axis的顺序？

1 个答案: