web-dev-qa-db-ja.com

Vue-chartjsがレスポンシブチャートをウィンドウに対して高すぎます

私はchart.jsを使用してシンプルなレスポンシブHTML + JSチャートを作成しました。 Vue CLI内で行うことにしたので、vue-chartjsに切り替えようとしましたが、同じグラフでは常にウィンドウよりも約33％高くレンダリングされるため、垂直スクロールバーが表示されます（幅は細かい）私はレンダリングするサンプルの些細なグラフで問題を再現しました：

import {Line} from 'vue-chartjs'
export default {
  extends: Line,
  mounted () {
    this.renderChart(data, options)
  } 
}

dataは取るに足らないものであり、optionsは{}であることに注意してください。

Vueコンポーネントでvue-chartjsの代わりにchart.jsを使用すると、正常に機能します。つまり、コンポーネントから上記のコードを削除して、次のように変更するだけです。サンプルのHTML + chart.jsバージョンと同じように、正常にレンダリングされます。

import Chart from 'chart.js'
function mount(el) {
    return new Chart(
        document.getElementById(el).getContext('2d'), {
        type: 'line',
        data: data,
        options: options,
    })
}

export default {
    template: '<canvas id="chart"></canvas>',
    mounted () {
        self.chart = mount('chart')
    }
}

もちろん、デフォルトのresponsive: trueとmaintainAspectRatio: falseを使用しており、明示的なCSSやサイズの設定はどこにもありません。

Vue-chartjsを使用すると、チャートで高さを正しくレンダリングできないのはなぜですか？私はvue-chartjsバージョン3.4.2を使用していますが、いくつかのバージョンを試しました。 githubバグトラッカー全体を見てきましたが、関連するものは何も見つかりませんでした。

vue-chartjs
4
bulletmark

optionsを小道具としてまたはローカルに渡す必要があります。しかし、追加する必要があります：希望する高さとあなたが言ったオプション。これが私にとってどのように機能したかです：

オプション：

options: {
                    scales: {
                        yAxes: [
                            {
                                ticks: {
                                    beginAtZero: true
                                }
                            }]
                    },
                    responsive: true,
                    maintainAspectRatio: false
                }

テンプレート内：

<bin-graph-weight :chart-data="datacollection" :styles="myStyles" :options="datacollection.options"/>

graph-component.js：

import { Line, mixins } from 'vue-chartjs'

const { reactiveProp } = mixins

export default {
    extends: Line,
    mixins: [reactiveProp],
    props: ['options'],
    mounted () {
    // this.chartData is created in the mixin.
        this.renderChart(this.chartData, this.options)
    },
    // If you want to pass options please create a local options object
    watch: {
        chartData () {
            this.$data._chart.update()
        }
    }
}
1
Despertaweb

また、高さのオーバーフローと応答性の問題もありました。スペースの100％を占めるフレックス親コンテナーを導入することで修正されました。レスポンシブオプションと比率オプションを設定した後（関連する chartjs doc を確認）、次のcssを使用して親の100％を埋めます（ここで、TheChartはvue-chartjsコンポーネントです。基本的に、次のことを確認する必要があります。チャートの親は常にそれ自身の親の100％を埋めています）：

vueテンプレート

<v-container class="chart-container">
  <TheChart :chartdata="chartData" :options="chartOptions" />
</v-container>

scss：

.chart-container {
  flex-grow: 1;
  min-height: 0;

  > div {
    position: relative;
    height: 100%;
  }
}
0
ego

応答性により、チャートは約束で再レンダリングされ、実際に2回設定されます。 Vue.jsのウォッチャーを使用すると、chartDataを変更するたびに再レンダリングできます。

チャートコンポーネント：

<script>
import { Bar, mixins } from 'vue-chartjs';

const { reactiveProp } = mixins;

export default {
  extends: Bar,
  mixins: [reactiveProp],
  props: ['chartOptions'],
  mounted() {
    this.renderChart(this.chartData, this.chartOptions);
  },
  watch: {
    chartData() {
      this.renderChart(this.chartData, this.chartOptions);
    },
  },
};
</script>

ダイナミックなスタイルと一緒に使用します。

チャートのプロパティ：

<template>
  <div style="height:300px;">
    <bar-chart :styles="myStyles" :chart-data="dataCollection"
      :chart-options="chartOptions"></bar-chart>
  </div>
</template>

<script>
import BarChart from './ChartBar.vue';

export default {
  components: {
    BarChart,
  },
  props: ['dataCollection'],
  data() {
    return {
      myStyles: {
        height: '300px',
        width: '100%',
        position: 'relative',
      },
      chartOptions: {
        scales: {
          yAxes: [{
            ticks: {
              beginAtZero: true,
            },
            gridLines: {
              display: true,
            },
          }],
          xAxes: [{
            ticks: {
              beginAtZero: true,
            },
            gridLines: {
              display: false,
            },
          }],
        },
        legend: {
          display: true,
        },
        tooltips: {
          enabled: true,
          mode: 'single',
          callbacks: {
            label(tooltipItems, data) {
              const { datasetIndex, index } = tooltipItems;
              const value = data.datasets[datasetIndex].data[index];
              if (parseInt(value, 10) > 999) {
                return ` ${value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')}`;
              }
              return ` ${value}`;
            },
          },
        },
        responsive: true,
        maintainAspectRatio: false,
        height: 300,
      },
    };
  },
};
</script>

<style lang="scss" scoped>

</style>
0
Jasper den Hartog