[英]Custom label for x axis on nvd3 graphs
我对使用javascript的图形非常陌生,现在开始为项目使用d3和nvd3。 我正在尝试绘制nvd3模块提供的多条形图。 我可以成功绘制数据,但是无法为每个系列定制x轴的值。 我相信x取整数值来绘制图形。 我的问题是如何为每个图形显示一些自定义值,例如X,Y,Z,而不是1、2、3。
下面是我正在使用的代码
var data = [{
"key" : "Step 1",
"values" : [{"y" : 5,"x" : 2,},{"y" : 4,"x" : 1,}, {"y" : 4,"x" : 0,}]
}, {
"key" : "Step 2",
"values" : [{"y" : 4,"x" : 0}, {"y" : 5,"x" : 2 }, {"y" : 6,"x" : 1 }]
}, {
"key" : "Step 3",
"values" : [{"y" : 5,"x" : 2}, {"y" : 4,"x" : 0 }, {"y" : 5,"x" : 1 }]
}];
var chart;
var tickValues = ['X','Y','Z'];
nv.addGraph(function() {
chart = nv.models.multiBarChart().margin({
bottom : 100
}).transitionDuration(300).delay(0).groupSpacing(0.5);
chart.multibar.hideable(true);
chart.reduceXTicks(true).staggerLabels(true);
chart.xAxis.showMaxMin(false)
//.tickValues(tickMarks)
.tickFormat(function(x){
return tickValues[x]
}
);
chart.yAxis.tickFormat(d3.format(',.1f'));
d3.select('#chart1 svg').datum(data).call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
如果我使用上述代码绘制图形,则图形可正确生成,但X轴的“自定义值”完全乱序。 我希望在数据数组hss x = 0,数据数组x = 1的Y处打印X。 但是现在它随机出现。
我尝试将数据传递为
var data = [{ "key" : "Step 1", "values" : [{"y" : 5,"x" : "Z",},{"y" : 4,"x" : "Y",}, {"y" : 4,"x" : "X",}]
这样我就可以绘制数据中提到的每个轴的期望值,但是它不起作用。 :(
有没有更好的方法来保持值同步? 任何帮助都是非常明显的。
您有key: Step 1
,代表系列的标签(通常在工具提示中使用)。
至于xAxis标签,它们实际上是正确显示的,因为xAxis标签是x数据。 如果以您的示例为例,将所有x : 0
更改为x : "Beer"
,您将明白我的意思。
这是一个jsFiddle,显示对x : 0
数据的更改: http : //jsfiddle.net/essboyer/ZKqkJ/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.