重点部分显示错误图表（NVD3）

Question

我想制作 "linePlusBarWithFocusChart" 的 NVD3 图表。问题是：在重点部分，它显示空项目（主数据中不存在）。当我删除 .x(function(d,i){return i}) 它显示真实数据，但带有错误的 xAxis 和 x2Axis 标签。谁能告诉我该如何解决？这是 jsFiddle

我的js代码是：

var myData=[
{
        "Date": "09/17/2013",
        "Target": "386",
        "Actual": "346",
        "Progress": "89.77"
    },
    {
        "Date": "09/18/2013",
        "Target": "386",
        "Actual": "346",
        "Progress": "89.77"
    },
    {
        "Date": "09/19/2013",
        "Target": "386",
        "Actual": "346",
        "Progress": "89.77"
    },
    {
        "Date": "09/20/2013",
        "Target": "386",
        "Actual": "346",
        "Progress": "89.77"
    },
    {
        "Date": "09/21/2013",
        "Target": "386",
        "Actual": "346",
        "Progress": "89.77"
    },
    {
        "Date": "10/02/2013",
        "Target": "419",
        "Actual": "346",
        "Progress": "82.52"
    },
    {
        "Date": "10/03/2013",
        "Target": "419",
        "Actual": "346",
        "Progress": "82.52"
    },
    {
        "Date": "10/04/2013",
        "Target": "419",
        "Actual": "346",
        "Progress": "82.52"
    },
    {
        "Date": "10/05/2013",
        "Target": "419",
        "Actual": "346",
        "Progress": "82.52"
    },
    {
        "Date": "10/06/2013",
        "Target": "438",
        "Actual": "370",
        "Progress": "84.55"
    }
];

    nv.addGraph(function () {

        // Catch data from Target column.
        var result = [];
        for (var i = 0; i < myData.length; i++) {
          result.push({
            x: (new Date(myData[i].Date)),
            y: myData[i].Target
          });
        }

        // Catch data from Actual column.
        var result1 = [];
        for (var i = 0; i < myData.length; i++) {
          result1.push({
            x: (new Date(myData[i].Date)),
            y: myData[i].Actual
          });
        }

        // Combine two series together.
        a = [{
          key: 'Target',
          "bar": true,
          color: '#ff7f0e',
          values: result
        },
        {
          key: 'Actual',
          color: '#007f0e',
          values: result1
        }].map(function (series) {
          series.values = series.values.map(function (d) { return { x: d.x, y: d.y } });
          return series;
        });

        // Define chart.
        var chart = nv.models.linePlusBarWithFocusChart()
          .margin({ top: 30, right: 60, bottom: 50, left: 70 })
          .x(function (d,i) { if(d.x>0){return i;}})
          .color(d3.scale.category10().range());

        // Determine the first x axis data labels.
        chart.xAxis.tickFormat(function (d) {
          var dx = a[0].values[d] && a[0].values[d].x || 0;
          if (dx > 0) {

            // Convert gregorian date to persian date.
            return d3.time.format("%d-%m-%y")(new Date(dx))
          }
          return null;
        });

        // Determine the seconde x axis data labels.
        chart.x2Axis.tickFormat(function (d) {
          var dx = a[0].values[d] && a[0].values[d].x || 0;
          return d3.time.format("%d-%m-%y")(new Date(dx))         
        });

        // Determine the y axises data labels format.
        chart.y1Axis
          .tickFormat(d3.format(',f'));

        chart.y3Axis
          .tickFormat(d3.format(',f'));

        // Add chart to page.  
        nv.log(a);
        d3.select('#chart1 svg')
          .datum(a)
          .call(chart);

        nv.utils.windowResize(chart.update);
    });

Answer 1

我自己找到了答案，只是代码修改如下：

var myData = [{
  "Date": "09/17/2013",
  "Target": "386",
  "Actual": "346",
  "Progress": "89.77"
}, {
  "Date": "09/18/2013",
  "Target": "386",
  "Actual": "346",
  "Progress": "89.77"
}, {
  "Date": "09/19/2013",
  "Target": "386",
  "Actual": "346",
  "Progress": "89.77"
}, {
  "Date": "09/20/2013",
  "Target": "386",
  "Actual": "346",
  "Progress": "89.77"
}, {
  "Date": "09/21/2013",
  "Target": "386",
  "Actual": "346",
  "Progress": "89.77"
}, {
  "Date": "10/02/2013",
  "Target": "419",
  "Actual": "346",
  "Progress": "82.52"
}, {
  "Date": "10/03/2013",
  "Target": "419",
  "Actual": "346",
  "Progress": "82.52"
}, {
  "Date": "10/04/2013",
  "Target": "419",
  "Actual": "346",
  "Progress": "82.52"
}, {
  "Date": "10/05/2013",
  "Target": "419",
  "Actual": "346",
  "Progress": "82.52"
}, {
  "Date": "10/06/2013",
  "Target": "438",
  "Actual": "370",
  "Progress": "84.55"
}];

nv.addGraph(function() {

  // Catch data from Target column.
  var result = [];
  for (var i = 0; i < myData.length; i++) {
    result.push({
      x: (new Date(myData[i].Date)),
      y: myData[i].Target
    });
  }

  // Catch data from Actual column.
  var result1 = [];
  for (var i = 0; i < myData.length; i++) {
    result1.push({
      x: (new Date(myData[i].Date)),
      y: myData[i].Actual
    });
  }

  // Combine two series together.
  a = [{
    key: 'Target',
    "bar": true,
    color: '#ff7f0e',
    values: result
  }, {
    key: 'Actual',
    color: '#007f0e',
    values: result1
  }].map(function(series) {
    series.values = series.values.map(function(d) {
      return {
        x: d.x,
        y: d.y
      }
    });
    return series;
  });

  // Define chart.
  var chart = nv.models.linePlusBarWithFocusChart()
    .margin({
      top: 30,
      right: 60,
      bottom: 50,
      left: 70
    })
    .x(function(d, i) {
      if (d.x > 0) {
        return d.x;
      }
    })
    .color(d3.scale.category10().range());

  // Determine the first x axis data labels.
  chart.xAxis.tickFormat(function(d) {
    // Convert gregorian date to persian date.
    return d3.time.format("%d-%m-%y")(new Date(d))
  });

  // Determine the seconde x axis data labels.
  chart.x2Axis.tickFormat(function(d) {
    return d3.time.format("%d-%m-%y")(new Date(d))
  });

  // Determine the y axises data labels format.
  chart.y1Axis
    .tickFormat(d3.format(',f'));

  chart.y3Axis
    .tickFormat(d3.format(',f'));

  // Add chart to page.  
  nv.log(a);
  d3.select('#chart1 svg')
    .datum(a)
    .call(chart);

  nv.utils.windowResize(chart.update);
});

重点部分显示错误图表（NVD3）

Focused part shows wrong chart (NVD3)

javascript

d3.js

nvd3.js