Question

我将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');

}

Answer 1

你可以删除canvas元素中的所有元素，这样你就可以再次绘制到一个新刷新的画布

<p>How many numbers would you like to add?</p>
<form id="calc">
  <select id="nums">
    <option value="0">Please select</option>
    <option value="2">Two numbers</option>
    <option value="3">Three numbers</option>
    <option value="4">Four numbers</option>
  </select>
  <div id="fields"></div><hr/>
  <input type="submit" value="Find value" /> <input type="text" id="total" />
  
</form>

Answer 2

这里这样做

<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>

这可能会帮助您获得一个想法

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

2 个答案: