Question

我是D3和NVD3排行榜的新手。

我正在尝试创建折线图，并且在每行的末尾，我想显示最终值。

这样的事情：

http://bl.ocks.org/ZJONSSON/3918369

或修复最后显示的工具提示图例，如下所示：

tooltip legend

这是我的例子：

<!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.js中每行末尾添加图例

0 个答案: