如何删除条形图中的旧数据

How to remove old data in a bar chart

本文关键字：数据 条形图 何删除 删除      更新时间：2023-09-26

我将JSON数据传递到条形图，数据基于下拉值。所以关于下拉图值的变化应该是变化的。它在变化，但当我们悬停在最后一次访问值时，条形图也在震动。请提出你的建议。

<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');
}

您可以删除画布元素中的所有元素，以便再次绘制到新刷新的画布中

$("#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>

这可能有助于您了解

相关文章：