绘制类别线图

Question

是否可以在plotly.js中创建类别线图，其中x轴具有两个类别的类别？

有关我的意思的示例，请参见this link

上的线图

Answer 1

您可以使用共享Y轴的子图，但每个子图都有其自己的分类X轴。像这样：

var trace1 = {
  name: 'type1',
  x: ['a', 'b', 'c'],
  y: [10, 11, 12],
  type: 'scatter',
  mode: 'lines'
};

var trace2 = {
  name: 'type2',
  x: ['d', 'e', 'f'],
  y: [10, 11, 12],
  xaxis: 'x2',
  type: 'scatter',
  mode: 'lines'
};

var trace3 = {
  name: 'type2',
  x: ['g', 'h', 'i'],
  y: [10, 11, 12],
  xaxis: 'x3',
  type: 'scatter',
  mode: 'lines'
};

var data = [trace1, trace2, trace3];

var layout = {
  xaxis: {domain: [0, 0.33]},
  xaxis2: {domain: [0.33, 0.66]},
  xaxis3: {domain: [0.66, 1]}
};

Plotly.newPlot('myDiv', data, layout);