Javascript 在NVD3.js中的每一行末尾添加图例
我是D3和NVD3图表的新手 我试图创建一个折线图，在每一行的末尾，我想显示最终的值 大概是这样的： 或者修复要在末尾显示的工具提示图例，如下所示： 这是我的例子：Javascript 在NVD3.js中的每一行末尾添加图例,javascript,d3.js,nvd3.js,Javascript,D3.js,Nvd3.js,我是D3和NVD3图表的新手 我试图创建一个折线图，在每一行的末尾，我想显示最终的值 大概是这样的： 或者修复要在末尾显示的工具提示图例，如下所示： 这是我的例子： <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>NVD3</t
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>NVD3</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="lib/d3.v3.js"></script>
<link href="nv.d3.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="nv.d3.js"></script>
<script type="text/javascript">
var dados = [
{ descricao: 'serie 1', valores: [
{ data: '2014-10-01T03:00:00.000Z', valor: 1 },
{ data: '2014-10-02T03:00:00.000Z', valor: 2 },
{ data: '2014-10-03T03:00:00.000Z', valor: 3 },
{ data: '2014-10-04T03:00:00.000Z', valor: 4 },
{ data: '2014-10-05T03:00:00.000Z', valor: 2 },
{ data: '2014-10-06T03:00:00.000Z', valor: 10 },
{ data: '2014-10-07T03:00:00.000Z', valor: 5 },
]},
{ descricao: 'serie 2', valores: [
{ data: '2014-10-01T03:00:00.000Z', valor: 3 },
{ data: '2014-10-02T03:00:00.000Z', valor: 2.7 },
{ data: '2014-10-03T03:00:00.000Z', valor: 5 },
{ data: '2014-10-04T03:00:00.000Z', valor: 4.6 },
{ data: '2014-10-05T03:00:00.000Z', valor: 5 },
{ data: '2014-10-06T03:00:00.000Z', valor: 5.8 },
{ data: '2014-10-07T03:00:00.000Z', valor: 7 },
]}
];
/*These lines are all chart setup. Pick and choose which chart features you want to utilize. */
nv.addGraph(function() {
var chart = nv.models.lineChart()
.useInteractiveGuideline(true) //We want nice looking tooltips and a guideline!
.transitionDuration(300) //how fast do you want the lines to transition?
.color(d3.scale.category10().range())
.showLegend(true) //Show the legend, allowing users to turn on/off line series.
.showYAxis(true) //Show the y-axis
.showXAxis(true) //Show the x-axis
;
chart.xAxis //Chart x-axis settings
.axisLabel('Data')
.ticks(d3.time.days, 1)
.tickFormat(function(d) {
return d3.time.format('%d/%m/%Y')(new Date(d));
});
chart.yAxis //Chart y-axis settings
.axisLabel('Custo (R$)')
.tickFormat(d3.format('$,2'));
/* Done setting the chart up? Time to render it!*/
var myData = buildData(); //You need data...
d3.select('#chart') //Select the <svg> element you want to render the chart in.
.datum(myData) //Populate the <svg> element with chart data...
.call(chart); //Finally, render the chart!
nv.utils.windowResize(function() { chart.update() });
return chart;
});
function buildData() {
var ret = [];
for (var i = 0; i < dados.length; i++) {
var dado = dados[i];
var serie = { key : dado.descricao, values: [] };
for (var j = 0; j < dado.valores.length; j++) {
var valor = dado.valores[j];
serie.values.push({ x: new Date(valor.data), y: valor.valor });
}
ret.push(serie);
}
return ret;
}
</script>
</head>
<body>
<svg id="chart" style="height: 100%; width: 70%;"></svg>
</body>
</html>
NVD3
var护墙板=[
{描述：'serie 1'，valores:[
{数据：'2014-10-01T03:00:00.000Z'，valor:1}，
{数据：'2014-10-02T03:00:00.000Z'，valor:2}，
{数据：'2014-10-03T03:00:00.000Z'，valor:3}，
{数据：'2014-10-04T03:00:00.000Z'，valor:4}，
{数据：'2014-10-05T03:00:00.000Z'，valor:2}，
{数据：'2014-10-06T03:00:00.000Z'，valor:10}，
{数据：'2014-10-07T03:00:00.000Z'，valor:5}，
]},
{描述：'serie 2'，valores:[
{数据：'2014-10-01T03:00:00.000Z'，valor:3}，
{数据：'2014-10-02T03:00:00.000Z'，valor:2.7}，
{数据：'2014-10-03T03:00:00.000Z'，valor:5}，
{数据：'2014-10-04T03:00:00.000Z'，valor:4.6}，
{数据：'2014-10-05T03:00:00.000Z'，valor:5}，
{数据：'2014-10-06T03:00:00.000Z'，valor:5.8}，
{数据：'2014-10-07T03:00:00.000Z'，valor:7}，
]}
];
/*这些线都是图表设置。选择要使用的图表功能*/
nv.addGraph（函数（）{
var chart=nv.models.lineChart（）
.useInteractiveGuideline（true）//我们需要好看的工具提示和指南！
.transitionDuration（300）//您希望线路以多快的速度过渡？
.color（d3.scale.category10（）.range（））
.showLegend（true）//显示图例，允许用户打开/关闭线系列。
.showYAxis（true）//显示y轴
.showXAxis（true）//显示x轴
;
chart.xAxis//图表x轴设置
.axisLabel（“数据”）
.滴答声（d3.time.days，1）
.d.格式（函数（d）{
返回d3.time.format（“%d/%m/%Y”）（新日期（d））；
});
chart.yAxis//图表y轴设置
.axisLabel（'Custo（R$）'）
.tickFormat（d3.format（'$，2'））；
/*设置好图表了吗？该渲染了*/
var myData=buildData（）；//您需要数据。。。
d3.选择（“#图表”）//选择要在其中呈现图表的元素。
.datum（myData）//用图表数据填充元素。。。
.call（chart）；//最后，呈现图表！
windowResize（函数（）{chart.update（）}）；
收益表；
});
函数buildData（）{
var-ret=[]；
对于（变量i=0；i有人能帮我做两件事中的一件吗？你们有小提琴吗？我知道如何在D3中做到这一点，但我不知道NV。原则是，您将为每个系列创建一个。在每个选项中，您将附加一个和一个。文本的（x，y）坐标是（宽度，y[最后一个数据点]）。我这里有一个例子，但它只是D3：我也知道如何在D3中实现这一点。问题是，我需要在内华达州做。