个人中心
gpt4 book ai didi

javascript - 如何将数据插入nvd3条形图

转载 作者：行者123 更新时间：2023-11-30 07:47:13 26 4
gpt4 key购买 nike

我有一个 nvd3 图表示例，但是我不知道如何将数据输入到图表中并使用它。

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link href="build/nv.d3.css" rel="stylesheet" type="text/css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.2/d3.min.js" charset="utf-8"></script>
    <script src="build/nv.d3.js"></script>
    <script src="lib/stream_layers.js"></script>
    <style>
        text {
            font: 12px sans-serif;
        }

        svg {
            display: block;
        }

        html, body, #test1, svg {
            margin: 0px;
            padding: 0px;
            height: 100%;
            width: 100%;
        }
    </style>
</head>
<body>
    <div id="test1">
        <svg></svg>
    </div>
    <script>

        //var test_data = stream_layers(3,128,.1).map(function(data, i) {
        var test_data = stream_layers(3, 128, .1).map(function (data, i) {
            return {
                key: (i == 1) ? 'Non-stackable Stream' + i : 'Stream' + i,
                nonStackable: (i == 1),
                values: data
            };
        });
        nv.addGraph({
            generate: function () {
                var width = nv.utils.windowSize().width,
                    height = nv.utils.windowSize().height;

                var chart = nv.models.multiBarChart()
                    .width(width)
                    .height(height)
                    .stacked(true)
                ;

                chart.dispatch.on('renderEnd', function () {
                    console.log('Render Complete');
                });

                var svg = d3.select('#test1 svg').datum(test_data);
                console.log('calling chart');
                svg.transition().duration(0).call(chart);

                return chart;
            },
            callback: function (graph) {
                nv.utils.windowResize(function () {
                    var width = nv.utils.windowSize().width;
                    var height = nv.utils.windowSize().height;
                    graph.width(width).height(height);

                    d3.select('#test1 svg')
                        .attr('width', width)
                        .attr('height', height)
                        .transition().duration(0)
                        .call(graph);

                });
            }
        });

    </script>
</body>
</html>

Java(数据来自哪里)

/* 受到 Lee Byron 的测试数据生成器的启发。 */

function stream_layers(n, m, o) {
  if (arguments.length < 3) o = 0;
  function bump(a) {
    var x = 1 / (.1 + Math.random()),
        y = 2 * Math.random() - .5,
        z = 10 / (.1 + Math.random());
    for (var i = 0; i < m; i++) {
      var w = (i / m - y) * z;
      a[i] += x * Math.exp(-w * w);
    }
  }
  return d3.range(n).map(function() {
      var a = [], i;
      for (i = 0; i < m; i++) a[i] = o + o * Math.random();
      for (i = 0; i < 5; i++) bump(a);
      return a.map(stream_index);
    });
}

/* Another layer generator using gamma distributions. */
function stream_waves(n, m) {
  return d3.range(n).map(function(i) {
    return d3.range(m).map(function(j) {
        var x = 20 * j / m - i / 3;
        return 2 * x * Math.exp(-.5 * x);
      }).map(stream_index);
    });
}
function stream_index(d, i) {
  return {x: i, y: Math.max(0, d)};
}

如上所示，示例的数据是随机生成的。如果有人可以给我一个引用，或者一个如何将数据输入分组条形图的示例。这确实对我有很大帮助。

我试图添加我的数据的是这个 http://nvd3.org/livecode/index.html#codemirrorNav分组条形图示例。

我真的对这个 JavaScript 编码很陌生，所以非常感谢所有的帮助。

最佳答案

来自 NVD3 网站的示例:

nv.addGraph(function() {
    var chart = nv.models.multiBarChart()
      .transitionDuration(350)
      .reduceXTicks(true)   //If 'false', every single x-axis tick label will be rendered.
      .rotateLabels(0)      //Angle to rotate x-axis labels.
      .showControls(true)   //Allow user to switch between 'Grouped' and 'Stacked' mode.
      .groupSpacing(0.1)    //Distance between each group of bars.
    ;

    chart.xAxis
        .tickFormat(d3.format(',f'));

    chart.yAxis
        .tickFormat(d3.format(',.1f'));

    d3.select('#chart1 svg')
        .datum(test_data)
        .call(chart);

    nv.utils.windowResize(chart.update);

    return chart;
});

所以，这里关键是要有 id="chart1"的元素，并在该元素内部有一个空的 svg 元素(我正在解释上面的设置，它可以是不同的 id，并且直接只有 svg 元素)

重要的是数据格式必须是特定的格式。所以它应该是一个 JSON 对象，如下所示: 

test_data = [
    {
      values: [{x,y},{x,y}],
      key: 'some key', 
      color: 'some color'
    },....

    {
      values: [{x,y},{x,y}],
      key: 'some key', 
      color: 'some color'
    }
];

在你的例子中，我看到生成和回调函数很奇怪，我发现它有点混淆。

上例引用: http://nvd3.org/examples/multiBar.html

并引用最新的文档和示例: http://nvd3-community.github.io/nvd3/examples/documentation.html

关于javascript - 如何将数据插入nvd3条形图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33748646/

26 4 0
文章推荐： java - Confluence 的新 Relic Java 安装
文章推荐： javascript - 如何在url中传递一个字符串数组
文章推荐： java - 工厂方法重载
文章推荐： javascript - Jquery/Javascript 数学 : Why are these two 1 line math problems not giving the same answer?
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com