Javascript 如何删除条形图中的旧数据
我将JSON数据传递给我的条形图，数据基于下拉值。所以下拉图形值的变化应该是变化的。它在变化，但当我们停留在上次访问的值时，条形图也在晃动。请给出你的建议Javascript 如何删除条形图中的旧数据,javascript,jquery,Javascript,Jquery,我将JSON数据传递给我的条形图，数据基于下拉值。所以下拉图形值的变化应该是变化的。它在变化，但当我们停留在上次访问的值时，条形图也在晃动。请给出你的建议 <div class="col_half" id="subSectionalChart" style="opacity: 0;"> <canvas id="subSectionalChartCanvas" width="547" height="400"></canvas> </div>
<div class="col_half" id="subSectionalChart" style="opacity: 0;">
<canvas id="subSectionalChartCanvas" width="547" height="400"></canvas>
</div>
function subSectionalGraphCall(data){
var livelabels=[];
var livedata=[];
for(var i=0; i<data.length; i++){
livelabels.push(data[i].subSectionVisited);
livedata.push(data[i].subSectionCount);
}
var options = {
scaleBeginAtZero : true,
scaleShowGridLines : true,
scaleOverlay: false,
scaleShowGridLines: true,
scaleGridLineColor : "rgba(0,0,0,.05)",
scaleGridLineWidth : 1,
scaleShowHorizontalLines: true,
scaleShowVerticalLines: true,
barShowStroke : true,
barStrokeWidth : 2,
barValueSpacing : 5,
barDatasetSpacing : 1,
};
var barChartData = {
labels : livelabels,
datasets : [
{
fillColor : "rgba(200,147,165,0.5)",
strokeColor : "rgba(151,187,205,1)",
data : livedata,
}
]
};
function show(){
var ctx = document.getElementById("subSectionalChartCanvas").getContext("2d");
new Chart(ctx).Bar(barChartData,options);
}
$('#subSectionalChart').appear( function(){ $(this).css({ opacity: 1 }); setTimeout(show,300); },{accX: 20, accY: -10},'easeInCubic');
}
函数子分区图调用（数据）{
var livelabels=[]；
var livedata=[]；
对于（var i=0；i您可以删除canvas元素中的所有元素，以便可以再次打印到新刷新的画布中
$("#subSectionalChartCanvas").empty();
给你
<html>
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
</head>
<body>
<div class="col_half" id="subSectionalChart" style="opacity: 1;">
<canvas id="subSectionalChartCanvas" width="547" height="400"></canvas>
</div>
<script>
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data: [65, 59, 80, 81, 56, 55, 40]
}
]
};
var options = {
scaleBeginAtZero : true,
scaleShowGridLines : true,
scaleOverlay: false,
scaleShowGridLines: true,
scaleGridLineColor : "rgba(0,0,0,.05)",
scaleGridLineWidth : 1,
scaleShowHorizontalLines: true,
scaleShowVerticalLines: true,
barShowStroke : true,
barStrokeWidth : 2,
barValueSpacing : 5,
barDatasetSpacing : 1,
};
setTimeout(test, 5000);
var ctx = document.getElementById("subSectionalChartCanvas").getContext("2d");
var x = new Chart(ctx).Bar(data,options);
function test() {
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data: [1, 2, 3, 4, 5, 6, 7]
}
]
};
x.clear();
x = new Chart(ctx).Bar(data,options);
}
</script>
</body>
</html>
风险值数据={
标签：[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”]，
数据集：[
{
标签：“我的第一个数据集”，
填充颜色：“rgba（220220,0.5）”，
strokeColor:“rgba（2200,0.8）”，
高光填充：“rgba（2200,0.75）”，
强光笔划：“rgba（2201）”，
数据：[65,59,80,81,56,55,40]
}
]
};
变量选项={
scaleBeginAtZero:对，
scaleShowGridLines：对，
scaleOverlay:false，
scaleShowGridLines：对，
scaleGridLineColor:“rgba（0,0,0,05）”，
scaleGridLineWidth:1，
缩放水平线：对，
scaleShowVerticalLines：没错，
barShowStroke：是的，
杆行程宽度：2，
barValueSpacing:5，
barDatasetSpacing:1，
};
设置超时（测试，5000）；
var ctx=document.getElementById（“subSectionalChartCanvas”）.getContext（“2d”）；
var x=新图表（ctx）.Bar（数据、选项）；
功能测试（）{
风险值数据={
标签：[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”]，
数据集：[
{
标签：“我的第一个数据集”，
填充颜色：“rgba（220220,0.5）”，
strokeColor:“rgba（2200,0.8）”，
高光填充：“rgba（2200,0.75）”，
强光笔划：“rgba（2201）”，
数据：[1,2,3,4,5,6,7]
}
]
};
x、 清除（）；
x=新图表（ctx）.Bar（数据、选项）；
}
这可能会帮助您获得一个想法如果我添加了此代码表本身，您是否可以告诉我需要在何处添加此代码code@ramesh只需在绘制绘图的语句之前添加此项，这样在绘制绘图之前，画布元素子组件将被删除，并且您将获得没有任何子组件的新画布元素SunCapt TypeError:$（…）。selectAll不是我在控制台中遇到此错误的函数。如果我在创建画布元素和图表本身之前添加，我很抱歉selectAll（）是一个d3.js方法，要使$适用，您必须包含您可能已经知道的jquery，所以只需执行$（“#subSectionalChartCanvas”）。empty（）
但当我将鼠标移到条形图上时，画布数据仍未清除。我在此行上方添加了以前的数据var ctx=document.getElementById（“subSectionalChartCanvas”）.getContext（“2d”）；new chart（ctx）.bar（barChartData，options）；在悬停时，它不应给出以前的选定值数据，这是我的问题。请看一看，这可能会解决您的问题