在Vue中使用Plotly.js-with-locales

超级大超越

于 2023-07-07 14:04:26 发布

阅读量1.4k

点赞数

文章标签： javascript vue.js plotly

本文链接：https://blog.csdn.net/u012632105/article/details/131595372

版权

首先，使用 npm 或者 yarn 安装 plotly.js 和 plotly.js-with-locales：
```
npm install plotly.js plotly.js-with-locales --save
```
在 Vue 组件中，你可以导入 plotly.js-basic-dist 和 plotly.js-with-locales-dist
```
import Plotly from 'plotly.js-basic-dist';
import 'plotly.js-with-locales-dist';
```

创建一个 Vue 组件，例如 PlotlyChart：

<template>
  <div>
    <div id="chart"></div>
  </div>
</template>

<script>
export default {
  name: 'PlotlyChart',
  mounted() {
    this.drawChart();
  },
  methods: {
    drawChart() {
      // 使用 Plotly 创建图表
      Plotly.newPlot('chart', [{
        x: [1, 2, 3],
        y: [2, 4, 6],
        type: 'scatter'
      }]);

      // 设置本地化语言
      Plotly.setPlotConfig({
        locale: 'zh-CN'
      });
    }
  }
};
</script>

在需要使用图表的组件中引入 PlotlyChart 组件：

<template>
  <div>
    <h1>Plotly.js with Locales Example</h1>
    <PlotlyChart />
  </div>
</template>

<script>
import PlotlyChart from './PlotlyChart.vue';

export default {
  name: 'App',
  components: {
    PlotlyChart
  }
};
</script>