使用 Plotly 在 JavaScript 中为 Vue.js 创建直角坐标系

Louis Robert
2024年10月5日星期六 下午7:50:31
Plotly

使用 Plotly 构建自定义坐标系

在图形工作中，就像使用直角坐标系一样，原点和轴缩放排列非常重要。当使用不支持灵活轴修改的图表库时，开发人员经常会遇到限制。创建图表可能很困难，特别是当原点位于中间并且使用传统数字格式标记轴时。

如果您在 JavaScript 项目中使用 Vue.js，您可能会遇到类似的问题。图表库可以绘制数据，但它们通常不会将原点居中或调整轴以满足用户的需求。当尝试绘制特定的图形类型（如圆形或对称形式）时，这可能特别麻烦。

一个名为 Plotly 的强大 JavaScript 图形库也许可以帮助解决这个问题。它提供了很大程度的定制，让您可以更改标签和轴的位置以满足您的项目的要求。您可以通过适当的配置来设计精确满足您需求的坐标系。

本教程将向您展示如何使用 Plotly 创建一个具有对称命名轴且中心为零的直角坐标系。完成后，您将确切地知道如何在 Vue.js 项目中应用它。

命令 使用示例
tickvals 使用 Plotly，您可以使用此命令指定轴上显示刻度的精确值。为了生成围绕原点的对称范围，在示例中将其设置为 [-0.3, -0.2, -0.1, 0, 0.1, 0.2, 0.3]。
zeroline 此 Plotly 布局属性保证了轴在零处的可见性。我们的代码中使用它来将 x 轴和 y 轴设置为零，这是使原点居中所必需的。
range Plotly 中的轴边界是使用 range 手动设置的。在本例中，x 轴和 y 轴均设置为 [-0.5, 0.5]，确保图形的轴延伸超过绘制的数据。
newPlot Plotly 函数 newPlot 负责创建新图。它通过使用图表的数据、布局和 DOM 元素在我们的 Vue.js 应用程序中创建最终的视觉结果。
xAxes 要更改 Chart.js 中 x 轴的行为（包括缩放和刻度值设置），请使用 xAxes。在这种情况下，它被配置为保证x轴显示-0.5到0.5的范围。
borderColor 可以使用此 Chart.js 属性调整绘制线的颜色。对于图表上的自定义线条颜色，在示例中设置为#3e95cd。
fill Chart.js 的填充选项指示是否填充线条下方的空间。为了保证图形仅显示线条，在我们的示例中，将其设置为 false。
shallowMount 要安装 Vue 组件进行单元测试，请使用 Vue Test Utils 中的此命令。它允许单独进行组件测试，而不需要渲染子组件。
expect Expect 是 Jest 的重要组成部分，用于创建断言来确定给定条件是否为真。它检查特定的 DOM 元素（例如图形容器）是否出现在我们的测试中。

了解 Plotly 和 Chart.js 解决方案

在第一种方法中，使用以下命令创建中心为零的定制直角坐标系 。 Plotly 以其适应性而闻名，使程序员能够创建广泛的图形自定义。该脚本试图解决的主要问题是如何排列轴，使它们代表对称比例，并将用户指定的标准数值增量应用于轴 和 。我们可以直接管理轴上显示的值，并通过利用诸如 滴答声。在这里，重要的是使用 选项，这使得 Plotly 将轴绘制为零，从而将图形的原点放置在绘图区域的中间。

利用 属性，保证图形显示一致的区域，是该方法的另一个重要组成部分。如果没有它，Plotly 的自动缩放功能将提供超出对称图表可接受范围的视图。通过将图形嵌入到 DOM 元素中， 的灵活性使得集成到 Vue.js 项目中变得简单。这允许开发人员完全控制图形的呈现，包括动态更新图形以响应用户输入或数据集修改的能力。

另一个著名的图形库， ，用于第二个解决方案。尽管 Chart.js 完全可配置的轴不如 Plotly 的通用，但它仍然可以根据该项目的特定需求进行定制。图表选项允许我们调整 和 特征，它们控制图形的比例并保证轴代表对称范围。绘制圆形等形状需要在两个轴上均匀间隔的数值增量，就需要这样做。这里的目标是绘制形状轮廓而不是图形线下方的阴影区域，因此 充满 选项已停用。

我们通过将图表逻辑封装在动态激活的方法中，在两个系统中提供代码模块化和可重用性。因此，可以根据各种数据集修改或重建图表，这大大提高了解决方案对不断变化的输入的适应性。这种集成与 Vue.js 完美配合，因为可以使用 Vue 的反应系统更新图表并将其插入模板中。此外，通过定义禁止自动缩放或不需要的布局更改的范围和特征，Plotly 和 Chart.js 示例可保证图表在不同设备上显示一致。

解决方案 1：使用 Plotly 构建自定义直角坐标系

Vue.js 环境中使用 Plotly.js 的前端 JavaScript

// Step 1: Install Plotly.js in your Vue.js project
// npm install plotly.js-dist --save
// Step 2: Import Plotly in your Vue component
import Plotly from 'plotly.js-dist';
// Step 3: Create a method to generate the graph
methods: {
  drawGraph() {
    const data = [{
      x: [-0.3, -0.2, -0.1, 0, 0.1, 0.2, 0.3],
      y: [0.3, 0.2, 0.1, 0, -0.1, -0.2, -0.3],
      type: 'scatter',
      mode: 'lines+markers',
    }];
    const layout = {
      xaxis: {
        range: [-0.5, 0.5],
        zeroline: true,
        tickvals: [-0.3, -0.2, -0.1, 0, 0.1, 0.2, 0.3],
      },
      yaxis: {
        range: [-0.5, 0.5],
        zeroline: true,
        tickvals: [-0.3, -0.2, -0.1, 0, 0.1, 0.2, 0.3],
      },
    };
    Plotly.newPlot('graphDiv', data, layout);
  }
}
// Step 4: Include a <div> to hold the graph in your template
<template>
  <div id="graphDiv"></div>
</template>

解决方案 2：使用 Chart.js 和 Axis 自定义的替代方法

使用 Chart.js 和 Vue.js 的前端 JavaScript

// Step 1: Install Chart.js in your project
// npm install chart.js --save
// Step 2: Import and set up Chart.js
import { Line } from 'vue-chartjs';
import { Chart } from 'chart.js';
// Step 3: Create a method for custom axes
methods: {
  renderChart() {
    const ctx = document.getElementById('myChart');
    new Chart(ctx, {
      type: 'line',
      data: {
        labels: [-0.3, -0.2, -0.1, 0, 0.1, 0.2, 0.3],
        datasets: [{
          data: [0.3, 0.2, 0.1, 0, -0.1, -0.2, -0.3],
          borderColor: '#3e95cd',
          fill: false
        }]
      },
      options: {
        scales: {
          xAxes: [{
            ticks: {
              min: -0.5,
              max: 0.5
            }
          }],
          yAxes: [{
            ticks: {
              min: -0.5,
              max: 0.5
            }
          }]
        }
      }
    });
  }
}
// Step 4: Include the canvas element in your template
<template>
  <canvas id="myChart"></canvas>
</template>

Plotly 和 Chart.js 实现的单元测试

使用 Jest 进行单元测试

// Step 1: Install Jest and Vue Test Utils
// npm install --save-dev jest @vue/test-utils
// Step 2: Write unit tests for the Plotly implementation
import { shallowMount } from '@vue/test-utils';
import MyGraphComponent from '@/components/MyGraphComponent.vue';
describe('Plotly graph rendering', () => {
  it('renders correctly with custom axes', () => {
    const wrapper = shallowMount(MyGraphComponent);
    wrapper.vm.drawGraph();
    expect(wrapper.find('#graphDiv').exists()).toBe(true);
  });
});
// Step 3: Write unit tests for the Chart.js implementation
describe('Chart.js graph rendering', () => {
  it('renders the graph with correct axis configuration', () => {
    const wrapper = shallowMount(MyGraphComponent);
    wrapper.vm.renderChart();
    expect(wrapper.find('#myChart').exists()).toBe(true);
  });
});

Plotly 对自定义坐标系的灵活性

极大的定制自由度 是使用它进行 JavaScript 图表的主要好处之一。与某些更基本的图表框架相比，Plotly 使您可以完全控制图表的各个方面。当建立以原点为中心的直角坐标系时（绘制特定几何形状或对称数据分布的图形所必需的功能），这特别有用。当用如下值标记轴时 ，Plotly 的布局设置提供了对刻度线、缩放和轴标签的完全控制。

Plotly 的管理能力 允许您在同一个图表上绘制不同的数据点，而不会相互干扰，这是另一个重要功能。当处理各种数据集或尝试绘制复杂的形状（如圆形或椭圆形）时，此功能非常有用。 Plotly 广泛的布局选项可以帮助开发人员解决一个轴完美运行而另一个轴未按计划对齐的常见问题。

此外，Plotly 可以轻松地与诸如 ，使程序员能够设计动态的反应性图表，这些图表可以根据用户输入或数据集中的修改进行调整。这对于需要实时数据更改的交互式项目或应用程序尤其重要。对于复杂的绘图项目来说，Plotly 是一个很好的选择，因为它具有与 JavaScript 框架的适应性和兼容性，特别是当需要精确控制轴系统时。

  1. 在 Plotly 中，如何使图表的原点居中？
  2. 这 该选项可用于 x 和 y 轴。这保证了两个轴上的原点都将显示为零。
  3. 我可以在同一个图表上绘制多个数据集吗？
  4. 可以添加多个 使用 Plotly 绘制图表，这使得将许多数据点绘制在一起变得简单。
  5. 在 Plotly 中，如何设置自己的轴刻度值？
  6. 这 选项允许您手动指定刻度应出现的轴坐标。
  7. 如果我的轴需要非线性刻度怎么办？
  8. 可以使用以下命令在 x 或 y 轴上创建自定义比例 ，这是由 Plotly 支持的。
  9. 如何动态更新 Vue.js 中的图表？
  10. 您可以使用 Vue 的反应性机制通过调用来更新图表以响应数据的变化 功能。

借助 Plotly 的强大功能，在 JavaScript 中创建定制直角坐标系变得非常容易。为了进一步控制图表的设计，您可以快速将原点居中并更改轴标签。 Plotly 的适应性解决了其他图表框架经常出现的问题。

Plotly 非常适合交互式项目，因为它为 Vue.js 开发人员提供动态更新和无缝集成。由于其在处理各种数据集方面的多功能性，可以精确地绘制复杂的形状（例如圆形），而不会影响性能或定制。

  1. 详细介绍如何使用 Plotly 创建自定义坐标系。欲了解更多详情，请访问 Plotly.js 文档 。
  2. 此参考资料提供了有关 Vue.js 与 Plotly 等第三方库集成的见解。访问此处的资源： Vue.js 官方指南 。
  3. 此源提供了使用 Chart.js 的其他示例和解决方案。访问 Chart.js 文档 。