Question

我试图在nvd3库中的lineplusbargraph中的上一行中加上2点的差值，但没有找到任何方法。我可以读取xml文件，而不是在他的图表上使用简单的值。我想用条形图和线图显示不同月份的数据使用差异。

＆＃13;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link href="../build/nv.d3.css" rel="stylesheet" type="text/css">
    <script src="../build/d3.min.js" charset="utf-8"></script>
    <script src="../build/nv.d3.js"></script>

    <style>
        text {
            font: 12px sans-serif;
        }

        svg {
            display: block;
        }
        html, body, #chart1, svg {
            margin: 0px;
            padding: 0px;
            height: 100%;
            width: 100%;
        }
        button {
            margin: 2px;
            margin-left: 80px;
        }
    </style>
</head>
<body>
<div style="position:absolute; top: 0; left: 0;">
    <button onclick="chart.switchYAxisOrder(!chart.switchYAxisOrder()); chart.update();">toggle axis</button>
    <button onclick="chart.focusEnable(!chart.focusEnable()); chart.update();">toggle focus</button>
    <span style="color: #C60;">&lt;-- turn focus on or off!</span>
</div>
<div id="chart1" class='with-3d-shadow with-transitions'>
    <svg> </svg>
</div>

<script>

    var testdata = [
        {
            "key" : "Quantity" ,
            "bar": true,
            "values" : [ [ 1136005200000 , 127100.0] , [ 1172638800000 , 564700.0], [ 1217476800000 , 2732646.0], [ 1277870400000 , 1309915.0] , [ 1335758400000 , 514733.0]  ]
        },
        {
            "key" : "Quantity" ,
            "values" : [ [ 1136005200000 , 127100.0] , [ 1172638800000 , 564700.0], [ 1217476800000 , 2732646.0], [ 1277870400000 , 1309915.0] , [ 1335758400000 , 514733.0]]
        }
    ].map(function(series) {
            series.values = series.values.map(function(d) { return {x: d[0], y: d[1] } });
            return series;
        });

    var chart;
    nv.addGraph(function() {
        chart = nv.models.linePlusBarChart()
            .margin({top: 50, right: 80, bottom: 30, left: 80})
            .legendRightAxisHint(' [Using Right Axis]')
            .color(d3.scale.category10().range())
			.options({focusEnable: false});

        chart.xAxis.tickFormat(function(d) {
            return d3.time.format('%x')(new Date(d))
        }).showMaxMin(false);

        chart.y2Axis.tickFormat(function(d) { return '$' + d3.format(',f')(d) });
        chart.bars.forceY([0]).padData(false);

        chart.x2Axis.tickFormat(function(d) {
            return d3.time.format('%x')(new Date(d))
        }).showMaxMin(false);

        d3.select('#chart1 svg')
            .datum(testdata)
            .transition().duration(500).call(chart);

        nv.utils.windowResize(chart.update);

        chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); });

        return chart;
    });

</script>
</body>
</html>

＆＃13;

如何在NVD3图表的lineplusbar图表上添加差值标签？

0 个答案: