我想制作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);
});
答案 0 :(得分:0)
我自己找到了答案,只需修改代码如下:
HTTPoison.post(
"http://localhost:4000/res",
body,
header,
hackney: [cookie: ["res=a933ec1dd9; logged_in=true"]]
)