Angularjs 具有日期范围滑块的nvd3图表奇怪行为

在显示带有Ajax请求的nvd3图表时，这些图表正在连接起来。因此，我认为问题是由于异步调用延迟造成的（可能是在加载完整数据之前显示图表，等等）。所以我使用了承诺，但我还是遇到了同样的问题。请看那辆破车

如果更改日期范围滑块，主图表将无法正确显示。我不知道问题出在哪里？在搜索了论坛上的一些帖子后，我遇到了一些事情，比如时间序列中的差距，这是因为什么？如果是这样，我如何解决时间序列差距问题？我搜索了nvd3网站，但没有找到任何关于填补时间序列数据空白的文档。一些论坛帖子建议使用c3.js代替nvd3，但我不知道是否真的值得改为c3.js？根据我的经验，我觉得nvd3是最好的，我不想离开nvd3

如果nvd3网站提供更多的实时时间序列数据样本和一些常见问题的文档，如填补时间序列中的空白、对数据进行排序等，将对初学者非常有帮助

随着我的项目发布日期临近，我不知道现在该做什么？转换到c3.js对我来说是最糟糕的选择。我也从同一个plunker附加了错误屏幕截图

我觉得对json数据进行排序没有问题：

  angular.forEach($scope.data, function(
                                        series, index) {
                                    series.values.sort(function(a, b) {
                                        return a.x - b.x;
                                    });
                                });

---

有几个问题需要您考虑：

---

我同意shabeer90的观点，数据很有新意。您有多个值同时出现

您的排序是正确的，但代码中的排序不起作用……请尝试将其添加到ajax调用的响应中（设置$scope.data=data之后）

此外，您还需要进行我在中概述的更改（到lineWithFocusChart模型中的nvd3）

访问xScale有点棘手…在此图表上，您需要浏览以下行：

$scope.options={
图表：{
键入：“lineWithFocusChart”，
身高：450，
保证金：{
前20名，
右:20,，
底数：60，
左：40
},
过渡期：500，
线：{//仔细查看您的数据。对于
31/08/13
上的类别MNK，您有5个数据点的值
425.30、2285.80、3676.60、23839.20、31023.70、38598
？要么您使用了错误的图表类型，要么您需要整理数据。我同意shabeer90的观点，数据很时髦。您有多个值同时出现t同时。Mike，请查看我的plunker。问题似乎没有解决。我也用错误屏幕截图编辑了我的问题。Mike，无论我附加多少次图像，它都不会出现。堆栈溢出网站本身可能有问题。但在我的上述plunker中，如果拖动日期范围滑块，您可以注意主图表记号和图形线显示不正确。我已经应用了您在这里提到的所有更改。我甚至在这里使用了正确的数据。Madasu：在这个Plunk中，您更改了排序中的等式，这导致数据排序不正确。也就是说，您应该选择a.x-b.x，而不是a[0]-b[0].除此之外，我也不确定。今天我在做这个样式表，所以我会告诉你我是否有任何顿悟…迈克，还没有解决，但我得到了一些参考可能对你有帮助..请查看在那里完成的勾号格式计算。可能在那行也解决了这个问题。如果我成功，我会更新你。谢谢。勾号格式：function（d）{var dx=$scope.data[0]。值[d].x；var label=$scope.data[0]。值[d]。标签；返回标签？标签：d3.time.format（“%x”）（新日期（dx））；}
$scope.options = {
    chart: {
    type: 'lineWithFocusChart',
    height: 450,
    margin : {
        top: 20,
        right: 20,
        bottom: 60,
        left: 40
    },
    transitionDuration: 500,
    lines : { // <-- add this
        xScale : d3.time.scale()
    },
    lines2 : { // <-- add this too
        xScale : d3.time.scale()
    },
    xAxis: {
        ticks : d3.time.months, <-- add the time interval
        axisLabel: 'X Axis',
        tickFormat: function(d){
            return  d3.time.format('%d/%m/%y')(new Date(d))
        }
    },
    x2Axis: {
        tickFormat: function(d){
            return  d3.time.format('%d/%m/%y')(new Date(d))
        }
    },
    yAxis: {
        axisLabel: 'Y Axis',
        tickFormat: function(d){
            return d3.format(',.2f')(d);
        },
        rotateYLabel: false
    },
     y2Axis: {
        tickFormat: function(d){
            return d3.format(',.2f')(d);
        }
    }
}