如何访问基准变量

时间:2015-11-17 07:04:40

标签: javascript d3.js bar-chart nvd3.js

所以我有java脚本代码

var data = [
[
{"key": "Previous", "values": [
[9,         47.96, 0]
,[10,         44.65, 1]
,[11,         38.64, 2]
,[12,         46.41, 3]
,[1,         48.49, 4]
,[2,         44.33, 5]
,[3,         43.94, 6]
,[4,         35.08, 7]
,[5,         38.20, 8]
,[6,         36.64, 9]
,[7,         42.82, 10]
,[8,         40.48, 11]
]}, 
{"key": "Current", "values": [
[9,         45.82, 0]
,[10,         40.16, 1]
,[11,         29.56, 2]
,[12,         29.19, 3]
,[1,         40.91, 4]
,[2,         42.48, 5]
,[3,         37.19, 6]
,[4,         26.60, 7]
,[5,         41.01, 8]
,[6,         38.59, 9]
,[7,         41.82, 10]
,[8,         43.00, 11]
]}
],
[
{"key": "ESTAMPARIA Anterior", "values": [
[8,         42.27, 0]
,[9,         47.96, 1]
,[10,         44.65, 2]
,[11,         38.64, 3]
,[12,         46.41, 4]
,[1,         48.49, 5]
,[2,         44.33, 6]
,[3,         43.94, 7]
,[4,         35.08, 8]
,[5,         38.20, 9]
,[6,         36.64, 10]
,[7,         42.82, 11]
]}, 
{"key": "ESTAMPARIA Atual", "values": [
[8,         40.48, 0]
,[9,         45.82, 1]
,[10,         40.16, 2]
,[11,         29.56, 3]
,[12,         29.19, 4]
,[1,         40.91, 5]
,[2,         42.48, 6]
,[3,         37.19, 7]
,[4,         26.60, 8]
,[5,         41.01, 9]
,[6,         38.59, 10]
,[7,         41.82, 11]
]}
]
];

var n = 0;

function update()
{
    nv.addGraph(function() {
        var chart = nv.models.multiBarChart()
        .x(function(d) { return d[0]; })
        .y(function(d) { return d[1]; })
        .color(['#84c1ea', '#1f77b4'])
        .forceY([0, 100])
        .reduceXTicks(false)
        .stacked(false)
        .showControls(true)
        .margin({left: 50, right: 30});

        chart.xAxis
        .showMaxMin(false)
        .tickFormat(function(d) {
            return ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'][d - 1];
        });

        chart.yAxis
        .tickFormat(function(n) {
            return d3.format('.0f')(n) + '%';
        });

        d3.select("#chart svg")
            .datum(data[++n % 2])
            .transition().duration(500).call(chart);

        nv.utils.windowResize(chart.update);

        return chart;
    });
}

update();

http://jsfiddle.net/0zsdmpd2/8/ 该链接是使用javascript代码的实际示例。

忽略更新按钮的功能,如何使用js Slider手动访问这些变量并更改前两个小节?

喜欢这个 http://jsfiddle.net/ZmnWq/68/

我能得到的任何帮助都非常感谢,因为我真的很陌生,需要帮助来了解nvd3图表的工作原理。

0 个答案:

没有答案