如何在 d3.js 中为条形图提供取景器功能。带取景器的图表是这样的http://nvd3.org/ghpages/lineWithFocus.html我想集成取景器功能的条形图是这样的http://nvd3.org/ghpages/multiBar.html .谁能帮我这个。我整整一周都在寻找,但什么也找不到。
最佳答案
其实你可以,但你必须做到。 而且非常简单!
从 nvd3.org 下载文件 获取文件 “linePlusBarWithFocusChart.html”。 我们必须对其进行编辑。
我的建议是删除线部分的数据,这样只有条形数据存在。
数据输入示例:
var testdata = [{
"key": "Quantity",
"bar": true,
"values": [
[1136005200000, 1271000.0],
[1138683600000, 1271000.0],
[1141102800000, 1271000.0],
etc. .]
}, {
"key": "Price", //Line chart data values are to be deleted.
"values": [
]
}]
最后去除折线图的轴数据:
chart.y2Axis
.tickFormat(function(d) {
// return '$' + d3.format(',.2f')(d) //what was present in the example
return '';
});
chart.y4Axis
.tickFormat(function(d) {
// return '$' + d3.format(',.2f')(d) //what was present in the example
return '';
});
您可以从文件 nvd3.js 中关闭图例 - 行号:6871,其中定义了模型:linePlusBarWithFocusChart。
Put showLegend=false;
同模型下nvd3.js中的showTooltip函数下。
var showTooltip = function(e, offsetElement) {
if (extent) {
e.pointIndex += Math.ceil(extent[0]);
}
var left = e.pos[0] + ( offsetElement.offsetLeft || 0 ),
top = e.pos[1] + ( offsetElement.offsetTop || 0),
x = xAxis.tickFormat()(lines.x()(e.point, e.pointIndex)),
y = (e.series.bar ? y1Axis : y1Axis).tickFormat()(lines.y()(e.point, e.pointIndex)),
content = tooltip(e.series.key, x, y, e, chart);
nv.tooltip.show([left, top], content, e.value < 0 ? 'n' : 's', null, offsetElement);
};
此时运行文件,可以发现只有条形图存在。 这可能不是正确的方法,但在可怕的情况下会有所帮助。 您可能还需要编辑掉一些不需要的元素。
如有任何疑问,请随时提出。
关于javascript - 带有 View Finder d3.js 的条形图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15083607/