重点部分显示错误的图表(NVD3)

时间:2017-11-11 11:20:28

标签: javascript d3.js nvd3.js

我想制作NVD3图表的“linePlusBarWithFocusChart”。 问题是:在焦点部分,它显示空项(主数据中不存在)。当我删除.x(函数(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);
    });

1 个答案:

答案 0 :(得分:0)

我自己找到了答案,只需修改代码如下:

HTTPoison.post(
  "http://localhost:4000/res",
  body,
  header,
  hackney: [cookie: ["res=a933ec1dd9; logged_in=true"]]
)