gpt4 book ai didi

javascript - 更新折线图

转载 作者:行者123 更新时间:2023-12-03 11:25:57 24 4
gpt4 key购买 nike

我正在使用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>

最佳答案

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

chart.data = [ ... ];

在您的代码中,您将重新分配 data 变量,该变量未链接到凹坑图表。完整演示 here .

关于javascript - 更新折线图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26915654/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com