Question

问题：如何在X轴上显示日期值，但如果它为空则不显示图表区域中的圆圈？

所以我正在玩Dimple.js，我已经创建了一个PHP函数，可以从我的MySql数据库中提取数据，并在某些卡车到达某个位置时映射出来。因此，X轴是日期，Y轴是它到达的军事时间。我使用最小日期和最大日期作为开始和结束循环。我想在x轴上显示min和max之间的每一天，所以如果没有卡车到达，我为此分配Value = Null。

问题是，对于这些空值，我的图表底部沿着y轴的0部分存在圆圈。我不知道如何检查值是否为零不显示圆，但仍然在X轴上显示日期。数据结构如下：

$dataset_progress005[] = array('Date' => $truck_arrive_day,
      'Value' => $truck_arrive_time,
      'Move ID' => $move_inbound_time_id);

使用javascript作为此....

<script type="text/javascript"> <!--Example Plot Chart....-->
        var svg = dimple.newSvg("#area_progress_report5", 800, 400);

        var data = <?php echo json_encode($dataset_progress005); ?>;

        var myChart = new dimple.chart(svg, data);
        myChart.setBounds(60, 30, 505, 305)
        var x = myChart.addCategoryAxis("x", "Date");
        //var x = myChart.addTimeAxis("x", "Date");
        //var x = myChart.addMeasureAxis("x", "Date");
        x.addOrderRule("Date");
        myChart.addCategoryAxis("y", "Value");
        myChart.addSeries("Move ID", dimple.plot.bubble);
        myChart.draw();

        x.shapes.selectAll("text").attr("transform",
            function (d) {
              return d3.select(this).attr("transform") + " translate(0, 40) rotate(-90)";
            });

     </script>

问题：如何在X轴上显示日期值，但如果它为空则不显示图表区域中的圆圈？

Answer 1

考虑到这一点，酒窝当前不支持空值。如果数据中存在空值，则无法检查数字字段并将其视为字符串字段，这意味着当您将其用于度量轴时，您将获得不同的值计数而不是总计。我将在代码库中修复它，但同时 - 如果您能够将数据集中的空值视为零 - 您可以在绘制后隐藏它们：

...
chart.draw();
series.shapes.style("opacity", function (d) {
    return (d.yValue === 0 ? 0 : 0.8);
});

这是表达我的意思的小提琴：http://jsfiddle.net/GeLng/2/

编辑，我刚刚注意到你正在做两个类别的轴，这会改变它。您仍然可以删除气泡并将其视为空，您不必担心转换为零，但我不确定是否有办法避免y轴上出现零空间：

http://jsfiddle.net/GeLng/3/

dimple.js显示X轴标签，但如果“value”为null，则不在图表上放置圆圈

1 个答案: