Question

我正在使用dimple js并且我有一个折线图代码但是这里是我设置事件的问题，每当点击一个按钮时，图表再次绘制，但chart.draw()没有工作。其中是问题任何帮助都会感激不尽 html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
<button id="test">Click Me</button>
<div id="chartContainer" class="chart_style"></div>
</body>
<script src="js/d3.js" charset="utf-8"></script>
<script src="js/dimple.js"></script>
<script type="text/javascript">
    var svg = dimple.newSvg("#chartContainer", 600, 400),
            data = [
                { "Value" : 10, "Year" : 2009 },
                { "Value" : 5, "Year" : 2010 },
                { "Value" : 4, "Year" : 2011 },
                { "Value" : 7, "Year" : 2012 },
                { "Value" : 10, "Year" : 2010 },
                { "Value" : 50, "Year" : 2020 },
                { "Value" : 40, "Year" : 2015 },
                { "Value" : 100, "Year" : 2014 },
                { "Value" : 200, "Year" : 2014 }
            ];
    var chart = new dimple.chart(svg, data);
    var x = chart.addCategoryAxis("x", "Year");
    x.addOrderRule("Year");
    var y = chart.addMeasureAxis("y", "Value");
    chart.addColorAxis("Value", ["green", "yellow", "red"]);
    var lines = chart.addSeries(null, dimple.plot.line);
    lines.lineWeight = 4;
    lines.lineMarkers = true;
    chart.ease = "bounce";
    chart.staggerDraw = true;
    chart.draw(2000);
    d3.select("#test").on("click", function() {
     ///here is the problem
        data = [
            { "Value" : 10, "Year" : 2009 },
            { "Value" : 5, "Year" : 2010 },
            { "Value" : 4, "Year" : 2011 },
            { "Value" : 50, "Year" : 2020 },
            { "Value" : 40, "Year" : 2015 },
            { "Value" : 120, "Year" : 2014 },
            { "Value" : 150, "Year" : 2011 },
            { "Value" : 500, "Year" : 2018 },
            { "Value" : 250, "Year" : 2015 },
            { "Value" : 200, "Year" : 2014 }
        ];
        chart.draw(1000);
    });
</script>
</html>

Answer 1

您需要使用更新chart.data attribute来更改与图表关联的数据：

chart.data = [ ... ];

在您的代码中，您重新分配data变量，该变量未与酒窝图表相关联。完整演示here。

更新折线图

1 个答案: