Plotly.js - 为堆积条形图中的每个 x 获取 4 个 y 值

Question

我为美国每个州的 4 个数据值绘制了堆积条形图。我一直在处理的 CSV 文件如下所示：

这是我为堆积条形图编写的 JS 代码：

// Read the data from CSV
d3.csv('https://raw.githubusercontent.com/krithikaragha/ResPy/master/Flask%20App/static/data/tobacco_use_by_state.csv', function(data) {

    var chartData = []; // Array containing all the traces
    function makeTrace(d) {    // Function to make all 50 traces
        return {
            x: ["Smokes Everyday", "Smokes Somedays", "Former Smoker", "Never Smoked"],
            y: [d.smokesEveryday, d.smokesSomedays, d.formerSmoker, d.neverSmoked],
            name: d.state,
            type: 'bar'
        }   
    }

    // Loop through all rows of the data
    for(var i = 0; i < data.length; i++) {

        // Call makeTrace to create a trace with index i
        chartData.push(makeTrace(data[i]));

        // Define a chart layout
        var layout = {
            barmode: 'stack',
            width: 1200,
            height: 800
        };

        // Plot the stacked bar chart 
        Plotly.newPlot('bar', chartData, layout);
    }
});

生成的堆积条形图最终如下所示：

我想要达到的结果是：我希望美国的每个州都有自己的条形图，上面有各自的 4 个值（smokesEveryday、smokesSomedays、formerSmoker 和 neverSmoked）

有什么方法可以实现吗？提前致谢。

Answer 1

我自己想通了。

事实证明，我必须为我需要的 4 个值中的每一个制作四个单独的跟踪。因此，我遍历数据并为每一列创建了数组——smokedEveryday、smokesSomedays、formerSmoker 和 neverSmoked，最后一个数组状态用于保存州的缩写。

然后我创建了 4 个单独的轨迹，其中 x 轴保存状态数组，y 轴保存相应的吸烟数组。

这里是修改后的代码sn-p：

// Read the data from CSV
d3.csv('https://raw.githubusercontent.com/krithikaragha/ResPy/master/Flask%20App/static/data/tobacco_use_by_state.csv', function(data) {

    var states = [];
    var smokesEveryday = []; 
    var smokesSomedays = [];
    var formerSmoker = [];
    var neverSmoked = [];

    // Loop through all rows of the data
    for(var i = 0; i < data.length; i++) {

        states.push(data[i].abbr);
        smokesEveryday.push(data[i].smokesEveryday);
        smokesSomedays.push(data[i].smokesSomedays);
        formerSmoker.push(data[i].formerSmoker);
        neverSmoked.push(data[i].neverSmoked);
    }

    var smokesEverydayTrace = {
        x: states,
        y: smokesEveryday,
        name: 'Smokes Everyday',
        type: 'bar'
    };

    var smokesSomedaysTrace = {
        x: states,
        y: smokesSomedays,
        name: 'Smokes Somedays',
        type: 'bar'
    };

    var formerSmokerTrace = {
        x: states,
        y: formerSmoker,
        name: 'Former Smoker',
        type: 'bar'
    };

    var neverSmokedTrace = {
        x: states,
        y: neverSmoked,
        name: 'Never Smoked',
        type: 'bar'
    };
      
    var data = [neverSmokedTrace, formerSmokerTrace, smokesSomedaysTrace, smokesEverydayTrace];
    
    var layout = {
        barmode: 'stack', 
        title: "Percentage of Tobacoo Use by State",
        xaxis: {
            title: {
                text: "Tobacco Use"
            }, 
            tickangle: 45
        },
        yaxis: {
            title: {
                text: "Percentage"
            }
        },
        bargap: 0.4,
        width: 1250,
        height: 800
    };
    
    Plotly.newPlot('bar', data, layout);
    
});