Question

见小提琴。我试图'翻转'这个量表，以便第一段是80％的，第二段是20％的一段（“第一段”，我的意思是从9点钟开始的段）。然而，无论我将值放在values数组中的顺序是什么，总是看起来首先对值进行排序并首先绘制最小的段。（注意：'50'值在仪表的下半部分绘制了一个看不见的180度白色部分。这就是Plotly的例子。）

任何人都可以提供帮助吗？谢谢！

values: [40, 10, 50] // re-arranging the 40 and 10 makes no difference in how the wedges are plotted

https://jsfiddle.net/0L6kv7L0/1/

Answer 1

Plotly的计量表只是变形的饼图。

您需要指定方向以强制执行正确的方向。

direction: "clockwise"

请参阅here了解您的小提琴更新和以下两个示例。

var data = [{
  values: [40, 10, 50],
  marker: {
    colors: ['rgba(255, 0, 0, .5)', 'rgba(110, 154, 22, .5)',
      'rgba(255, 255, 255, 0)'
    ]
  },
  text: ['80%', '20%', "I'm just a white piece of pie"],
  textinfo: 'text',
  textposition: 'inside',
  type: 'pie',
  rotation: 90,
  direction: "clockwise"
}];


Plotly.newPlot('myDiv1', data);

data = [{
  values: [10, 40, 50],
  marker: {
    colors: ['rgba(255, 0, 0, .5)', 'rgba(110, 154, 22, .5)',
      'rgba(255, 255, 255, 0)'
    ]
  },
  text: ['20%', '80%', "I'm just a white piece of pie"],
  textinfo: 'text',
  textposition: 'inside',
  type: 'pie',
  rotation: 90,
  direction: "counterclockwise"
}];

Plotly.newPlot('myDiv2', data);

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

Plotly gauge：改变仪表段的顺序

1 个答案: