web-dev-qa-db-ja.com

angular-chart.jsモジュールでの幅と高さの変更

angular module angular-chart.js を使用しています。操作は簡単で、非常にスマートです。しかし、変更できないことに気づきましたチャートのwidthとheightです。どこかで、チャートのサイズを次のように定義する必要があると読んだことがあります。

var vm = $scope;
vm.labels = [];
vm.data = [];

CrudService.getData(selDate).$promise.then(
     function (response) {
       angular.forEach(response, function (val) {
          val.datum = $filter('date')(val.datum, 'dd.MM.yyyy');
          vm.labels.Push(val.datum);
          vm.data.Push(val.grade);
       });

       vm.dataChart = [vm.data];

       /* This is the important part to define the size */
       vm.options = [
         {
            size: {
               height: 200,
               width: 400
            }
         }
       ];
       /************************************************/
    });

景色：

<canvas id="bar" 
        class="chart chart-bar" 
        chart-data="dataChart"
        chart-labels="labels"
        chart-click="onClick"
        chart-options="options">
</canvas>

Angular-chart.jsでwidthとheightを定義する方法を知っている人はいますか？

javascriptangularjschart.jsangular-chart
6
yuro

わかりました私はこのソリューションを試してみましたが、うまくいきました。

        <canvas id="bar"
                height="100"
                width="100"
                class="chart chart-bar" 
                chart-data="dataChart"
                chart-labels="labels"
                chart-click="onClick"
                chart-options="options">
        </canvas>

または、CSSクラスのスタイルのようにサイズを定義します。

14
yuro

次のように、<canvas>を<div>にラップすることもできます。

<div style="height:300px;width:300px;">
    <canvas
            class="chart chart-radar"
            chart-data="$ctrl.data"
            chart-options="options"
            chart-labels="$ctrl.labels"></canvas>
</div>

他の回答のようにwidthとheightを設定してもうまくいきませんでした。

7
kiltek

画面サイズに応じてチャートの高さを定義するには、次のコードを使用します。

コントローラ内

$scope.height_chart = window.innerHeight*0.7;

テンプレート内

<canvas height="{{height_chart}}" class="chart chart-line" data="weight.data" labels="weight.labels" series="weight.series"></canvas>

これらのコードがお役に立てば幸いです。

4
Samuel Dauzon

問題は、高さと幅の属性値がグラフに格納され、他の属性と同じ方法で更新されないことです。これを修正するには、リスナーを作成イベントに追加し、チャートオブジェクトの高さを手動で変更する必要があります

HTML：

<canvas
    id="chart"
    class="chart chart-horizontal-bar"
    chart-data="chart.data"
    chart-labels="chart.data.labels"
    chart-series="chart.series"
    chart-options="chart.options"
    chart-colors="chart.colors"
    height="{{ compareChart.height }}"
    width="{{ compareChart.width }}"
></canvas>

JS：

$scope.$on('chart-create', function (event, chart) {
    chart.chart.height = $scope.chart.height;
});

AJAXルックアップまたは新しいデータをもたらす何か）中に$scope.chart.heightが変化することを期待します。

1
Matthew Dolman

Chartはその親コン​​テナを使用して、キャンバスのレンダリングと表示サイズを更新します。ただし、この方法では、コンテナーを相対的に配置し、チャートキャンバス専用にする必要があります。コンテナサイズの相対値を設定することで、応答性を実現できます。

0
Anton Makarov