作者热门文章
- iOS/Objective-C 元类和类别
- objective-c - -1001 错误,当 NSURLSession 通过 httpproxy 和/etc/hosts
- java - 使用网络类获取 url 地址
- ios - 推送通知中不播放声音
我正在使用 nvd3 在我的 angular js 应用程序中创建条形图。这是脚本部分
<script>
var app = angular.module("nvd3TestApp", ['nvd3ChartDirectives']);
function ExampleCtrl2($scope){
$scope.exampleData2 = [
{
"key": "Series 1",
"values": [
["2004",5],["2005",10],["2006",3],["2007",9],["2008",10],["2009",5]]
}
];
$scope.xFunction = function(){
return function(d){
return d[0];
};
}
$scope.yFunction = function(){
return function(d){
return d[1];
};
}
}
</script>
这是 View div
<div ng-controller="ExampleCtrl2">
<nvd3-line-chart
data="exampleData2"
id="xExample"
width="550"
height="300"
showXAxis="true"
showYAxis="true"
x="xFunction()"
y="yFunction()"
tooltips="true">
<svg></svg>
</nvd3-line-chart>
</div>
如何使用“aaa”“bbb”等字符串作为 x 轴值。如果我用非数字字符串替换“2004”,它会报错错误:属性 transform="translate(NaN,0)"的无效值
最佳答案
您可以使用图表 xAxis 格式功能如下
chart.xAxis
.axisLabel('Date')
.tickFormat(function(d) {
var label = scope.totalLoanAmountData[0].values[d].label;
return label;
});
然后将您的数据与标签属性一起使用。
scope.totalLoanAmountData=[{
"key": "name of line one",
"values":[
{x:1,y:2, label:"label1"},
{x:1,y:2, label:"label2"},
{x:1,y:2, label:"label3"},
{x:1,y:2, label:"label4"},
{x:1,y:5, label:"label5"},
{x:1,y:2, label:"label6"},
{x:1,y:7, label:"label7"},
{x:1,y:2, label:"label8"},
{x:1,y:8, label:"label9"}]
},
{"key": "name of line two",
"values": [
{x:1,y:8, label:"label1"},
{x:1,y:2, label:"label2"},
{x:1,y:2, label:"label3"},
{x:1,y:6, label:"label4"},
{x:1,y:5, label:"label5"},
{x:1,y:2, label:"label6"},
{x:1,y:8, label:"label7"},
{x:1,y:2, label:"label8"},
{x:1,y:2, label:"label9"}]
}];
阅读this blogpost了解更多详情。
关于javascript - 如何将字符串值添加到 nvd3 折线图 x 轴值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24858382/
我是一名优秀的程序员,十分优秀!