1

いくつかの基準に基づいて折れ線グラフを表示する素晴らしいアプリケーションがあります。主な基準が変更されたら、現在の折れ線グラフをクリアしたい。ただし、これを行う方法がわかりません。私はAngularJS v1.4.0-rc2、Chart.js v1.0.2、angular-chart v0.7.1を使用しています。

ページをロードするとき、関数を呼び出しますupdateSelection()。この関数は、他の基準のいずれかが変更されたときにも呼び出されます。関数は次のように実装されます。

$scope.updateSelection = function() {
    $scope.chartLabels = maandData;
    if ($scope.isPostcodeArea()) {
        $scope.chartSeries = getPostcodeSeries();
        $scope.chartData = getPostcodeData($scope.dataArea.index, $scope.dataMetric.index);
    } else {
        $scope.chartSeries = getSelectionSeries();
        $scope.chartData = getSelectionData($scope.dataArea.index, $scope.dataMetric.index);
    }
};

これにより、適切な関数が呼び出され、主な基準に基づいて折れ線グラフのデータが初期化されます。Web ページにデータ エントリを表示すると、正しい値が表示されます。

主な基準の選択ボックスで、関数を呼び出しますupdateArea():

$scope.updateArea = function() {
    $scope.form.$setPristine();
    if ($scope.isPostcodeArea()) {
        $scope.postcodeSelection = null;
        $scope.postcodeCompare1 = null;
        $scope.postcodeCompare2 = null;
        $scope.postcodeCompare3 = null;
    } else {
        $scope.selectionData = null;
        $scope.selectionCompare1 = null;
        $scope.selectionCompare2 = null;
        $scope.selectionCompare3 = null;
    }
    $scope.selections = getSelections($scope.dataArea.index);
    $scope.selectionLabel = $scope.areas[$scope.dataArea.index].label;
    $scope.chartLabels = [];
    $scope.chartSeries = [];
    $scope.chartData = [];
};

この関数は、入力フォームとフォーム データをリセットします。また、別の基準のデータ ( selections)、基準に適したラベル( ) を決定しselectionLabel、チャート データをリセットする必要があります。

ただし、チャートは新しいデータを反映するように更新されません。それで、データを正しくリセットする方法はありますか？

グラフ自体は、次の HTML を使用して表示されます。

<canvas id="line" class="chart chart-line"
    data="chartData" labels="chartLabels" series="chartSeries"
    legend="true" options="{'scaleBeginAtZero': true, 'datasetFill': false}">
</canvas>
4

2 に答える 2

2

私は同じ問題を抱えていて、それを解決する2つの方法を見つけました

最初の方法は、キャンバスのコンテキストを取得し、clearRect 関数を使用することです。

var canvas = document.getElementById('line');
if (canvas){
    var ctx = canvas.getContext('2d');
    ctx.clearRect(0,0, ctx.canvas.width, ctx.canvas.height);
}

このようにして、データがまだ設定されているかどうかに関係なく、キャンバスをクリアできます。このようにすると、ホバーイベントに問題があり、マウスをその上に移動すると、キャンバスにデータが再度設定されました。そこで、別の方法を探しました。

試すことができる 2 番目の方法は、ChartJsProvider を使用することです。

1.- angular-chart.js ファイルの createChart 関数で、変数チャートの初期化の直後に次の行を追加します。

var chart = new ChartJs.Chart(ctx)[type](data, options);
ChartJs.createdChart = chart; // add this line so you can access chart variable from ChartJsProvider

2.- ChartJs をコントローラーに注入する

angular.module('myModule')
    .controller('MyController', MyController);

MyController.$inject = ['ChartJs'];

function MyController(ChartJs){
    // your controller code
}

3.-コントローラーで、createdChart destroy関数を使用してチャートをクリア/破棄します

var canvas = document.getElementById('line');
if (canvas) { 
    ChartJs.createdChart.destroy();
}

この方法は、クロム、オペラ、サファリで正しく機能しています。

編集:

ライブラリを変更するよりもこれを行うための新しい方法を見つけました (それは良い習慣ではないことを知っているので、この新しい方法を見つけようとしました)

ChartJsをコントローラーに注入する必要があります

angular.module('myModule')
    .controller('MyController', MyController);

MyController.$inject = ['ChartJs'];

function MyController(ChartJs){
    // your controller code
}

パラメータ elementId を使用して clearChart という関数を作成したため、ページに複数のグラフがある場合は、クリア/削除するグラフに直接アクセスできます。

function clearChart(elementId) {
    if (document.getElementById(elementId)) {
        var charts = ChartJs.Chart.instances; // Get all chart instances
        for (var key in charts){ // loop looking for the chart you want to remove
            if (!charts.hasOwnProperty(key)){
                continue;
            }
            var chartAux = ChartJs.Chart.instances[key]; 
            if (chartAux.chart.ctx.canvas.id === elementId){ 
                // Remove chart-legend before destroying the chart
                var parent = chartAux.chart.ctx.canvas.parentElement;
                var legend = chartAux.chart.ctx.canvas.nextElementSibling;
                parent.removeChild(legend);
                // Compare id with elementId passed by and if it is the one            
                // you want to remove just call the destroy function
                ChartJs.Chart.instances[key].destroy(); 
            }
        }
    }
}

この新しい 2 番目の方法は、私にとって完璧に機能します。

役に立てば幸いです。私の英語について申し訳ありません

于 2015-05-27T01:05:28.723 に答える