Vue chartJS/legacy-更改图例位置答案

【问题标题】：Vue chartJS/legacy- change Legend positionVue chartJS/legacy-更改图例位置
【发布时间】：2022-11-03 22:43:57
【问题描述】：

我正在使用带有 Laravel 后端的 Vue-Chart JS 做一个小项目。我用了vue2 图表，从 vue-chartjs/legacy 导入。所以，我想把 Legend 标签移到图表底部。

我尝试将legend: {position: "bottom",}, 添加到图表选项中，但没有成功。有没有其他方法可以做到这一点？

<template>
  <Bar
    :chart-options="chartOptions"
    :chart-data="chartData"
    :chart-id="chartId"
    :dataset-id-key="datasetIdKey"
    :plugins="plugins"
    :css-classes="cssClasses"
    :styles="styles"
    :width="width"
    :height="height"
  />
</template>

<script>
import { Bar } from "vue-chartjs/legacy";

import {
  Chart as ChartJS,
  Title,
  Tooltip,
  Legend,
  BarElement,
  CategoryScale,
  LinearScale,
} from "chart.js";

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

export default {
  name: "BarChart",
  components: {
    Bar,
  },
  props: {
    chartId: {
      type: String,
      default: "bar-chart",
    },
    datasetIdKey: {
      type: String,
      default: "label",
    },
    width: {
      type: Number,
      default: 400,
    },
    height: {
      type: Number,
      default: 400,
    },
    cssClasses: {
      default: "",
      type: String,
    },
    styles: {
      type: Object,
      default: () => {},
    },
    plugins: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      chartData: {
        labels: [
          "January",
          "February",
          "March",
          "April",
          "May",
          "June",
          "July",
          "August",
          "September",
          "October",
          "November",
          "December",
        ],
        datasets: [
          {
            label: "Data One",
            backgroundColor: "#f87979",
            data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11],
          },
        ],
      },
      chartOptions: {
        responsive: true,
        maintainAspectRatio: false,
        legend: {
          position: "bottom",
        },
      },
    };
  },
};
</script>

【问题讨论】：

标签： javascript vue.js vue-component vue-chartjs

【解决方案1】：

您需要添加一个插件对象并在其中移动图例

chartOptions: {
  responsive: true,
  maintainAspectRatio: false,
  plugins: {
    legend: {
      position: "bottom",
    }
  }
},

【讨论】：

谢谢！在找到这个好答案之前，一直在寻找这个几个小时仍然没有找到合适的文档！

【解决方案2】：

如果有人在某些图表上使用带有 Typescript 环境的 vue-chartjs 作为 Pie，我的两分钱，将图例作为道具放入 chartOptions.plugins 将引发 linter 类型错误：

'plugins.legend.position' 的类型在这些 types.ts(2322) 之间不兼容

因此，您只需要将其强制为 const ，如下所示：（不是正确的方法，但我没有找到任何解决方法来解决它）

chartOptions: {
  responsive: true,
  maintainAspectRatio: false,
  plugins: {
    legend: {
      position: "bottom" as const,
    }
  }
},

【讨论】：