如何设置 vue3-chartjs 固定高度？答案

【问题标题】：How to set vue3-chartjs fixed height?如何设置 vue3-chartjs 固定高度？
【发布时间】：2021-09-03 08:28:00
【问题描述】：

我正在为 ChartJS JT-McC/vue3-chartjs - GitHub 使用 Vue3 包装器和我想做一个固定高度的条形图。

这是代码：

<template>
  <h2>Bar Chart</h2>
  <div style="height: 700px">
    <vue3-chart-js v-bind="{ ...barChart }" />
  </div>
</template>

<script>
import Vue3ChartJs from "@j-t-mcc/vue3-chartjs";

export default {
  name: "App",
  components: {
    Vue3ChartJs,
  },
  setup() {
    const barChart = {
      type: "bar",
      options: {
        min: 0,
        max: 100,
        responsive: true,
        plugins: {
          legend: {
            position: "top",
          },
        },
        scales: {
          y: {
            min: -100,
            max: 100,
            ticks: {
              callback: function (value) {
                return `${value}%`;
              },
            },
          },
        },
      },
      data: {
        labels: ["VueJs", "EmberJs", "ReactJs", "AngularJs"],
        datasets: [
          {
            label: "My First Dataset",
            backgroundColor: ["#1abc9c", "#f1c40f", "#2980b9", "#34495e"],
            data: [40, 20, 50, 10],
          },
          {
            label: "My Second Dataset",
            backgroundColor: ["#2ecc71", "#e67e22", "#9b59b6", "#bdc3c7"],
            data: [-40, -20, -10, -10],
          },
        ],
      },
    };

    return {
      barChart,
    };
  },
};
</script>

我已经尝试将高度设置为 700px

  <div style="height: 700px">
    <vue3-chart-js v-bind="{ ...barChart }" />
  </div>

但它不起作用，图表高度根本没有变化。

这是演示link

可以在chart.js中设置固定高度吗？

【问题讨论】：

标签： javascript chart.js height vuejs3 fixed

【解决方案1】：

你想要这个吗？

<vue3-chart-js v-bind="{ ...barChart }" :height="700"/>

【讨论】：