Question

我有一个条形图，显示等待一定时间的客户数量。我希望每个类别中有一个百分比悬停在栏上，但无法知道如何做到这一点。

这是我到目前为止所拥有的。

var data = [{x: ['0-10', '11-20', '21-30', '31-45', '46-60', '61-120', '>120'],
             y: [100, 55, 33, 28, 12, 11, 1],
             name: 'Wait times',
             type: 'bar',
             hoverinfo: 'y'}]

var layout = {title: "Waiting Times",
              xaxis: {title: 'Minutes'},
              yaxis: {title: 'Number of customers'}}

Plotly.newPlot('mydiv', data, layout)

当我将鼠标悬停在栏上时，我会看到栏顶部显示的栏的值。我想要的行为是条形值显示在括号中的格式化为1小数点的百分比 - 例如第一个数据点为100（41.7％）。

我尝试过hoverinfo和hovermode设置的各种组合，但我无法理解文档。显然我需要像[41.66666666666667, 22.916666666666664, 13.750000000000002, 11.666666666666666, 5.0, 4.583333333333333, 0.4166666666666667]这样的百分比数组，但我不知道在哪里放置它或如何格式化它。

Answer 1

好的，我最后自己解决了这个问题。

var data = [{x: ['0-10', '11-20', '21-30', '31-45', '46-60', '61-120', '>120'],
             y: [100, 55, 33, 28, 12, 11, 1],
             name: 'Wait times',
             type: 'bar',
             hoverinfo: 'y+text',
             hovertext: ['41.7%', '22.9%', '13.8%', '11.7%', '5.0%', '4.6%', '4.2%']}]

var layout = {title: "Waiting Times",
              xaxis: {title: 'Minutes'},
              yaxis: {title: 'Number of customers'}}

Plotly.newPlot('mydiv', data, layout)

这给出了hoverinfo中的值，其下面的百分比值足够好。我可以用它后面的括号中的值和百分比创建一个hovertext数组，只需将hoverinfo更改为＆text;＆＃39; text＆＃39;为了我想要的确切效果。

在plotly.js中显示悬停在条形图中的百分比

1 个答案: