时间戳

首页 > 解决方案 > 如何在 vue 中将 chart.js 图形导出为 svg？

javascript - 如何在 vue 中将 chart.js 图形导出为 svg？

问题描述

我的应用程序中有一个图表，它是使用 Chart.js 库创建的。我的 graph.js 文件如下所示：

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

const { reactiveProp } = mixins;

export default {
  extends: Line,
  mixins: [reactiveProp],
  data() {
    return {
      options: {
        maintainAspectRatio: false,
        responsive: true,
        legend: {
          display: true,
          position: 'bottom',
        },
        scales: {
          yAxes: [
            {
              ticks: {
                suggestedMin: 0,
                callback(tick) {
                  return `${tick}%`;
                },
              },
            },
          ],
        },
        tooltips: {
          callbacks: {
            label(tooltipItem, data) {
              const dataset = data.datasets[tooltipItem.datasetIndex];
              const currentValue = dataset.data[tooltipItem.index];
              return ` ${dataset.label}: ${currentValue}%`;
            },
          },
        },
      },
    };
  },
  mounted() {
    this.renderChart(this.chartData, this.options);
  },
};

以及负责渲染它的组件（我已经删除了一些不相关的细节）：

<template>
  <div
    class="container">
    <b>
      ...
    </b>
    <div
      class="graph">
      <graph
        :styles="graphStyle"
        :chart-data=graphData">
      </graph>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import Graph from './graph';
import {
  ...
} from '../../constants';

export default {
  name: '...',
  components: {
    Graph,
  },
  data() {
    return {
      ...
    };
  },
  watch: {
    ...
  },
  methods: {
    ...
  },
  computed: {
    ...
  },
};
</script>

我想将其导出为 svg，然后将其发布到我的 api。我需要将它序列化为一个字符串，然后在 json 正文中使用 post 方法发送。我必须使用另一个外部库吗？如何将其序列化为 svg？感谢您的任何回答。

标签： javascriptvue.jssvgchart.js

解决方案

如果png您可以接受，可能有办法做到这一点。请记住，我没有对此进行测试，但它应该可以通过它的外观工作。

查看 的文档vue-chartjs，这里说您可以使用以下命令访问 chartjs 对象：

this.$data._chart

从那里，您应该能够使用它的方法将图表保存为 png - toBase64Image()：

this.$data._chart.toBase64Image()

推荐阅读