Plotly.js -获得堆叠条形图中每个x的4个y值

Plotly.js是一个开源的JavaScript图表库，用于创建交互式的数据可视化图表。它提供了丰富的图表类型和定制选项，可以轻松地在网页上展示数据。

对于堆叠条形图中每个x的4个y值，可以使用Plotly.js的堆叠条形图（stacked bar chart）来实现。堆叠条形图可以用于比较多个类别的数据，并显示每个类别中不同组的数值。

以下是使用Plotly.js创建堆叠条形图的示例代码：

// 导入Plotly.js库
import Plotly from 'plotly.js-dist';

// 定义x轴和y轴的数据
const xData = ['Category 1', 'Category 2', 'Category 3', 'Category 4'];
const yData1 = [10, 20, 30, 40];
const yData2 = [15, 25, 35, 45];
const yData3 = [5, 15, 25, 35];
const yData4 = [20, 30, 40, 50];

// 创建堆叠条形图的数据
const data = [
  {
    x: xData,
    y: yData1,
    type: 'bar',
    name: 'Y Value 1'
  },
  {
    x: xData,
    y: yData2,
    type: 'bar',
    name: 'Y Value 2'
  },
  {
    x: xData,
    y: yData3,
    type: 'bar',
    name: 'Y Value 3'
  },
  {
    x: xData,
    y: yData4,
    type: 'bar',
    name: 'Y Value 4'
  }
];

// 定义布局选项
const layout = {
  barmode: 'stack', // 设置为堆叠模式
  title: 'Stacked Bar Chart',
  xaxis: {
    title: 'X Axis'
  },
  yaxis: {
    title: 'Y Axis'
  }
};

// 在HTML页面上绘制图表
Plotly.newPlot('chart', data, layout);

在上述代码中，我们首先导入了Plotly.js库。然后，定义了x轴和4个y轴的数据，分别表示每个x的4个y值。接下来，创建了堆叠条形图的数据，每个数据对象包含x轴数据、y轴数据、图表类型和名称。然后，定义了图表的布局选项，包括标题、x轴和y轴的标题。最后，使用Plotly.newPlot方法在HTML页面上绘制了堆叠条形图。

关于Plotly.js的更多信息和使用方法，可以参考腾讯云的相关产品和文档：