如何在 plotly.js 的堆叠面积图中同时显示值和名称?
How do I display both value and name in stacked area chart in plotly.js?
下面link@emackey提供的解决方案中,只显示解决方案中的值,不显示trace的名称。我如何也显示名称,而不仅仅是值?
// This code was provided by emackey in Whosebug
var stacksDiv = document.getElementById("myDiv");
var traces = [
{x: [1,2,3], y: [2,1,4], fill: 'tozeroy'},
{x: [1,2,3], y: [1,1,2], fill: 'tonexty'},
{x: [1,2,3], y: [3,0,2], fill: 'tonexty'}
];
function stackedArea(traces) {
var i, j;
for(i=0; i<traces.length; i++) {
traces[i].text = [];
traces[i].hoverinfo = 'text';
for(j=0; j<(traces[i]['y'].length); j++) {
traces[i].text.push(traces[i]['y'][j].toFixed(0));
}
}
for(i=1; i<traces.length; i++) {
for(j=0; j<(Math.min(traces[i]['y'].length, traces[i-1]['y'].length)); j++) {
traces[i]['y'][j] += traces[i-1]['y'][j];
}
}
return traces;
}
Plotly.newPlot(stacksDiv, stackedArea(traces), {title: 'stacked and filled line chart'});
// This code was provided by emackey in Whosebug
<script src="https://cdn.plot.ly/plotly-1.2.1.min.js"></script>
<div id="myDiv" style="width: 480px; height: 400px;"></div>
你只需要改一行:
traces[i].hoverinfo = 'text';
应该变成
traces[i].hoverinfo = 'text+name';
下面link@emackey提供的解决方案中,只显示解决方案中的值,不显示trace的名称。我如何也显示名称,而不仅仅是值?
// This code was provided by emackey in Whosebug
var stacksDiv = document.getElementById("myDiv");
var traces = [
{x: [1,2,3], y: [2,1,4], fill: 'tozeroy'},
{x: [1,2,3], y: [1,1,2], fill: 'tonexty'},
{x: [1,2,3], y: [3,0,2], fill: 'tonexty'}
];
function stackedArea(traces) {
var i, j;
for(i=0; i<traces.length; i++) {
traces[i].text = [];
traces[i].hoverinfo = 'text';
for(j=0; j<(traces[i]['y'].length); j++) {
traces[i].text.push(traces[i]['y'][j].toFixed(0));
}
}
for(i=1; i<traces.length; i++) {
for(j=0; j<(Math.min(traces[i]['y'].length, traces[i-1]['y'].length)); j++) {
traces[i]['y'][j] += traces[i-1]['y'][j];
}
}
return traces;
}
Plotly.newPlot(stacksDiv, stackedArea(traces), {title: 'stacked and filled line chart'});
// This code was provided by emackey in Whosebug
<script src="https://cdn.plot.ly/plotly-1.2.1.min.js"></script>
<div id="myDiv" style="width: 480px; height: 400px;"></div>
你只需要改一行:
traces[i].hoverinfo = 'text';
应该变成
traces[i].hoverinfo = 'text+name';