本文介绍了protovis更新数据的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我已经尝试了很多使用jquery更新protovis的方法,但是没有任何反应.这是我的代码.

I have tried a lot to update protovis using jquery but nothing happens. here is my code.

<script type="text/javascript+protovis">
var minnesota =  [{name:"job 1", values:[182904,196530,203944,192492,77393,81243]}]

$(document).ready(function(){
draw();
$("button").click(function(){
minnesota = [{name:"changed job", values:[342,34234,2342,543]}]
draw();
});

});



    function draw(){
    var w = 200,
        h = 30,
        numberFormat = pv.Format.number(),
        dateFormat = pv.Format.date("%B %Y");

    /* Color by maximum number of people employed in that job. */
    var c = pv.Scale.log(minnesota, function(d) pv.max(d.values))
        .range("#ccc", "#1f77b4");

    /* Tile the visualization for each job. */
    var vis = new pv.Panel()
        .data(minnesota)
        .width(w)
        .height(h + 10)
        .top(6)
        .left(6)
        .right(6)
        .bottom(6);

    /* A panel instance to store scales (x, y) and the mouseover index (i). */
    var panel = vis.add(pv.Panel)
        .def("i", -1)
        .def("x", function(d) pv.Scale.linear(d.values, pv.index).range(0, w))
        .def("y", function(d) pv.Scale.linear(0, pv.max(d.values)).range(0, h))
        .bottom(10)
        .events("all")
        .event("mousemove", pv.Behavior.point(Infinity).collapse("y"));

    /* The area. */
    panel.add(pv.Area)
        .data(function(d) d.values)
        .fillStyle(function(d, p) panel.i() < 0 ? c(pv.max(p.values)) : "#2ca02c")
        .left(function() panel.x()(this.index))
        .height(function(d) panel.y()(d))
        .bottom(0)
        .event("point", function() panel.i(this.index))
        .event("unpoint", function() panel.i(-1));

    /* The x-axis. */
    panel.add(pv.Rule)
        .bottom(0);

    /* The mouseover dot. */
    panel.add(pv.Dot)
        .visible(function() panel.i() >= 0)
        .left(function() panel.x()(panel.i()))
        .bottom(function(d) panel.y()(d.values[panel.i()]))
        .fillStyle("#ff7f0e")
        .strokeStyle(null)
        .size(10);

    /* The label: either the job name, or the month and value. */
    panel.add(pv.Label)
        .bottom(-1)
        .textBaseline("top")
        .left(function() panel.i() < 0 ? 0 : null)
        .right(function() panel.i() < 0 ? null : 0)
        .textAlign(function() panel.i() < 0 ? "left" : "right")
        .textStyle(function() panel.i() < 0 ? "#999" : "#000")
        .text(function(d) panel.i() < 0 ? d.name
            : dateFormat(new Date(2000, panel.i() * 3, 1))
            + ": " + numberFormat(d.values[panel.i()]));

    vis.render();
    }
        </script>

当文档准备就绪时,它会创建图表,但是当我单击按钮时,它不会重新绘制图表.我已经使用firebug检查了新的数据值,这很好,但是它不会更新图表值.我已经做了很多尝试以找到解决方案,但未能成功.有什么把戏吗?

when document ready then it create charts but when I click button then it doesn't re draw chart. I've checked new data values with firebug which is fine but it doesn't update charts values.I've tried a lot to find solution but couldn't succeeded. Any trick?

推荐答案

我只是在每个更改数据的函数的末尾使用vis.render();.

I just use vis.render(); at the end of each function that changed the data.

这篇关于protovis更新数据的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

10-29 13:44