如何将字符串值添加到nvd3折线图x轴值
How to add String values to nvd3 line chart x axis values?
我使用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>
这里是视图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"}]
}];
相关文章:
- 用与线条相同的颜色填充多折线图上的点
- 跟踪jqplot垂直折线图的鼠标位置
- Morris.js折线图x轴标签在调整大小后消失
- 以角度nvd3折线图显示当前时间
- AngularJS nvd3折线图指令未在数据更改时重新绘制(非实时)
- 当使用 ajax 传递数据时,NVD3 折线图不显示 - data.map 不是一个函数
- NVD3.js-多折线图多x轴
- NVD3 JavaScript图表-使用1个或多个系列的具有重复右手y轴的折线图
- NVD3在xAxis上使用日期类型时,折线图错误地与网格对齐
- 使用nvd3.js绘制具有堆叠条形图和折线图的图表
- 本地折线图不同&使用NVD3创建远程json文件
- 如何以编程方式改变NVD3折线图的取景器(焦点图)
- 在nvd3结构中使用d3和json的多折线图
- 如何将字符串值添加到nvd3折线图x轴值
- 将nvd3 angularJS百分比四舍五入用于累计折线图
- 使用NVD3.js构建有焦点的折线图.为什么我的焦点条坏了?
- Angular nvd3:在折线图上缩放
- NVD3图表的交互式指南(折线图)在12列网格(引导)中被剪切时,我绘制了两个图表
- JavaScript 图表 - 带有两个 Y 轴的 NVD3 折线图
- 使用d3.js和nvd3.js的有序x轴折线图