Question

我想在剧情中为javascript显示两个甜甜圈图表，一个在另一个内部（就像下面的代码一样）。

问题是：如何调整内部饼图的大小？？

＆＃13;

var data = [{
  values: [51,49],
  labels: ["Type 1","Type 2"],
  type: 'pie',
  name: 'Control',
  marker: {
    colors: ['rgba(100, 100, 255, 0.7)','rgba(100, 100, 255, 1)'],
    line: {color: '#000000',width: 2}
  }  
},{
  values: [55,45],
  labels: ["Type 3","Type 4"],
  type: 'pie',
  name: 'Control',
  hole: 0.8,
  marker: {
    colors: ['rgba(100, 200, 102, 0.7)','rgba(100, 200, 102, 1)'],
    line: {color: '#000000',width: 2}
  }  
}];

var layout = {
  height: 400,
  width: 480
};

Plotly.newPlot('myDiv', data, layout);

＆＃13;

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<body>
  
  <div id="myDiv" style="width: 480px; height: 400px;"></div>

</body>

＆＃13;

Answer 1

您可以将其创建为子图并使用domain：

var data = [{
  values: [51,49],
  labels: ["Type 1","Type 2"],
  type: 'pie',
  name: 'Control',
  domain: {
    x: [0.2, .8],
    y: [0, 1]
  },
  marker: {
    colors: ['rgba(100, 100, 255, 0.7)','rgba(100, 100, 255, 1)'],
    line: {color: '#000000',width: 2}
  }  
},{
  values: [55,45],
  labels: ["Type 3","Type 4"],
  type: 'pie',
  name: 'Control',
  hole: 0.8,
  marker: {
    colors: ['rgba(100, 200, 102, 0.7)','rgba(100, 200, 102, 1)'],
    line: {color: '#000000',width: 2}
  }  
}];

var layout = {
  height: 400,
  width: 480
};

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

甜甜圈在另一个里面

1 个答案: