问题:如何在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轴上显示日期值,但如果它为空则不显示图表区域中的圆圈?
Question: How do I show the Date Value on the X Axis, but not show the circle in the chart area if it is null?
So I am playing around with Dimple.js and I have created a PHP function that pulls data from my MySql database, and maps out when certain trucks arrived to a location by hours. So the X Axis is the date and the Y Axis is the military time it arrived. I use the Min date and max date as the begin and end to loop through. I want to show each day between min and max on the x axis, so if no trucks arrived I assign Value = Null for that.
The problem is there are now circles on the bottom of my chart along the 0 section of the y axis for these nulls. I don't know how to check if value is zero don't show the circle, but still show the date on the X Axis. The data is structured as below:
$dataset_progress005[] = array('Date' => $truck_arrive_day, 'Value' => $truck_arrive_time, 'Move ID' => $move_inbound_time_id);with the javascript as this....
<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>Question: How do I show the Date Value on the X Axis, but not show the circle in the chart area if it is null?
最满意答案
看看这个,dimple当前不支持null值。 如果数据中存在空值,则无法检查数字字段并将其视为字符串字段,这意味着当您将其用于度量轴时,您将获得不同的值计数而不是总计。 我将在代码库中解决这个问题,但与此同时 - 如果您能够将数据集中的空值视为零 - 您可以在绘制后隐藏它们:
... chart.draw(); series.shapes.style("opacity", function (d) { return (d.yValue === 0 ? 0 : 0.8); });这是一个显示我的意思的小提琴: http : //jsfiddle.net/GeLng/2/
编辑,我刚刚注意到你正在做两个类别的轴,这会改变它。 您仍然可以删除气泡,并且可以将其视为null,您不必担心转换为零,但我不确定是否可以避免y轴上存在空间:
http://jsfiddle.net/GeLng/3/
Looking at this, dimple doesn't currently support null values quite as it should. If there is a null in your data it will fail the check for a numeric field and treat it as a string field, which means when you use it for a measure axis you will get a distinct count of values rather than an aggregate total. I will fix that in the code base but in the meantime - if you are able to treat nulls as zero in your dataset - you can hide them after drawing:
... chart.draw(); series.shapes.style("opacity", function (d) { return (d.yValue === 0 ? 0 : 0.8); });Here's a fiddle to show what I mean: http://jsfiddle.net/GeLng/2/
Edit, I've just noticed you are doing 2 category axes which changes it a bit. You can still remove the bubble and you can treat it as null, you don't need to worry about converting to zero, but I'm not sure of a way to avoid there being a null space on the y axis:
http://jsfiddle.net/GeLng/3/
更多推荐
发布评论