如何在plotly.js中使用正确的值制作堆积面积图？ [英] How do I make stacked area chart in plotly.js with correct values?

问题描述

堆积区域图表中有

当您将鼠标悬停在第一条垂直线上时，您会看到值2,3和6 。
但是如果查看源代码，正确的值是2,1和3。

有没有办法让区域图表正确堆叠值？

解决方案

原始值可用作悬停信息的文本标签，在堆叠的值汇总之前图表。

< pre class =snippet-code-js lang-js prettyprint-override> var stacksDiv = document.getElementById（myDiv）; var traces = [{x：[1,2,3]， y：[2,1,4]，填充：'tozeroy'}，{x：[1,2,3]，y：[1,1,2]，填充：'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 = []; trace [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];返回痕迹;} Plotly.newPlot（stacksDiv，stackedArea（traces），{title：'stacked and filled line chart'}）;

 < script src =https://cdn.plot.ly/plotly-1.2.1.min.js>< / script> ;< div id =myDivstyle =width：480px; height：400px;>< / div>  

There is an example of a stacked area chart:

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) {
    for(var i=1; i<traces.length; i++) {
        for(var 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'});

But stacking is done manually, so values are not correct:

When you mouse over the first vertical line, you see values 2, 3 and 6. But if you look in the source code, correct values are 2, 1 and 3.

Is there a way to get stacking for area charts with correct values?

解决方案

The original values can be used as text labels for the hover info, prior to the values being summed for the stacked chart.

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'});

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

这篇关于如何在plotly.js中使用正确的值制作堆积面积图？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！