移动的视图+ ChartJS v4中的水平条形图上的Y轴标签被切断

pkwftd7m  于 2023-04-20  发布在  Chart.js
关注(0)|答案(1)|浏览(236)

我有一个带Vue 3的Nuxt 3应用程序。我正在使用复合API和typescript。在我的package.json文件中,我有以下依赖项:

{
  ...
  "dependencies": {
    "chart.js": "^4.2.1",
    "vue-chartjs": "^5.2.0",
  }
  ...
}

当图表渲染时,我的y轴标签在移动的视图中被切断。请参见下图。

我的vue组件代码如下:
MovieHorizontalBarChart.vue

<template>
  <div class="chart-container">
    <ClientOnly>
      <Bar :data="data" :options="chartOptions" />
    </ClientOnly>
  </div>
</template>

<script setup lang="ts">
import {
  Chart as ChartJS,
  Title,
  Tooltip,
  Legend,
  BarElement,
  CategoryScale,
  LinearScale,
  ChartOptions,
} from "chart.js";
import { Bar } from "vue-chartjs";

ChartJS.register(
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend
);

const data = {
  labels: ["Label 1", "Very very very very long name that is cut off"],
  datasets: [
    {
      axis: "y",
      label: "Count",
      backgroundColor: "#000",
      data: [10, 24],
    },
  ],
};

const chartOptions: ChartOptions<"bar"> = {
  responsive: true,
  maintainAspectRatio: false,
  indexAxis: "y",
  plugins: {
    title: {
      display: true,
      text: "Horizontal Bar chart by ChartJS",
      font: { size: 14 },
    },
  },
};
</script>

<style lang="scss" scoped>
.chart-container {
  position: relative;
  height: 25vh;
}
</style>

问题:Very very very very long name that is cut off标签被切断。我如何让我的y轴标 checkout 现在多行上?或者有任何其他方法可以避免标签被切断?
注意:标签是动态的。我不知道每个标签会有多长。每个新的外部API请求都会生成新的值。我的实际标签代码如下:

const data = {
  labels: props.movies.map((movie) => movie.name),
  datasets: [
    {
      axis: "y",
      label: "Count",
      backgroundColor: "#000",
      data: props.movies.map((movies) => movie.count),
    },
  ],
};
dgiusagp

dgiusagp1#

您可以将标签设置为string或string[]的数组。
参见文档:https://www.chartjs.org/docs/latest/axes/cartesian/category.html#category-axis-specific-options
在您的案例中:

const data = {
  labels: ["Label 1", ["Very very very", "very long name", "that is cut off"]],
  datasets: [
    {
      axis: "y",
      label: "Count",
      backgroundColor: "#000",
      data: [10, 24],
    },
  ],
};

相关问题