json 添加2个下载图表的按钮时发现问题

wbrvyc0a  于 2023-05-02  发布在  其他
关注(0)|答案(1)|浏览(76)

bounty还有2天到期。回答此问题可获得+100声望奖励。Natasha希望引起更多关注这个问题。

我已经尝试添加按钮来下载在Plotly中创建的图表。但是我只能下载一种格式的文件，我正在努力添加另一个按钮来下载其他格式的文件。
下面是下载图表的代码：

var config = {
                      // ... other chart configuration options ...
                      // Add updatemenus for format selection
                      updatemenus: [{
                        buttons: [{
                          method: 'restyle',
                          args: ['visible', [true, false]], // Show SVG trace, hide PNG trace
                          label: 'SVG'
                        }, {
                          method: 'restyle',
                          args: ['visible', [false, true]], // Show PNG trace, hide SVG trace
                          label: 'PNG'
                        }],
                        showactive: false,
                        type: 'buttons',
                        direction: 'left',
                        pad: {'r': 10, 't': 10},
                        x: 0.1,
                        xanchor: 'left',
                        y: 1.1,
                        yanchor: 'top'
                      }]
                    };
                    
                    // Add event listener for download button
                    document.getElementById('download-btn').addEventListener('click', function() {
                      // Get currently selected format (SVG or PNG)
                      var format = network.data[0].visible[0] ? 'svg' : 'png';
                    
                      // Convert the Plotly chart to the selected format
                      Plotly.downloadImage(network, {
                        format: format,
                        width: 1200,
                        height: 800,
                        filename: 'my_chart',
                        scale: 2
                      }).then(function(dataUrl) {
                        // Create a temporary link element to download the image
                        var link = document.createElement('a');
                        link.href = dataUrl;
                        link.download = 'my_chart.' + format; // Set filename with appropriate extension
                        document.body.appendChild(link);
                        link.click();
                        document.body.removeChild(link); // Remove the temporary link element after download
                      });
                    });
                    
                    // Update the chart with the configured options
                    Plotly.updateConfig(config);

正如你所看到的，即使在添加updatemenus后，我无法在下拉菜单格式中获得2个按钮。
下面是完整的代码：

<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>
            Visualization
        </title>
        <link rel="stylesheet" href="style.css">
        <script src="https://cdn.plot.ly/plotly-1.58.5.min.js"></script>
        <!--<script src="https://cdn.jsdelivr.net/npm/file-saver@2.0.5/dist/FileSaver.min.js"></script>-->
        <style>
            .graph-container {
                display: flex;
                justify-content: center;
                align-items: center;
                height: 100vh;
            }
            .main-panel {
                width: 100%;
                height: 800px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
            }
            .side-panel {
            position: fixed;
            top: 0;
            bottom: 0;
            right: -300px;
            width: 300px;
            background-color: #f2f2f2;
            transition: right 0.5s;
            overflow-y: auto;
            padding: 20px;
        }

            .side-panel.open {
            right: 0;
            }

            .arrow {
            position: absolute;
            top: 20px;
            left: 20px;
            width: 0;
            height: 0;
            border-top: 20px solid transparent;
            border-bottom: 20px solid transparent;
            border-right: 20px solid #2196F3;
            cursor: pointer;
        }

            .arrow.open {
                transform: rotate(180deg);
            }
        </style>

    </head>
    <body>

        <div class="graph-container">

            <div id="network" class="main-panel">
                <button id="download-btn">Download Chart</button>
            </div>
            <div id="graph" class="side-panel">
                <div class="arrow"></div>
            </div>
        </div>

        <div id="main">
            <!-- <button class="openbtn" onclick="openNav()">☰ Open Sidebar</button>   -->
          </div>

        <script>

            function openNav() {
                document.getElementById("graph").style.width = "500px";
                document.getElementById("main").style.marginLeft = "500px";
            }
            function closeNav() {
                document.getElementById("graph").style.width = "0";
                document.getElementById("main").style.marginLeft= "0";
            }

            const sidepanel = document.querySelector('.side-panel');
            const arrow = document.querySelector('.arrow');

            arrow.addEventListener('click', function() {
            sidepanel.classList.toggle('open');
            arrow.classList.toggle('open');
        });

            //read the data from the json file
            fetch("data2.json")
                .then(response => response.json())
                .then( data => {
                    //This part of the code is used to used initialize the variables which will be used to create a network graph

                    //Initializing array for storing the variables
                    var nnodes = data.nnodes;
                    var nedges = data.nedges;
                    var ncones = data.ncones;
                    var x = data.x;
                    var y = data.y;
                    var z = data.z;
                    var edge_x = data.edge_x;
                    var edge_y = data.edge_y;
                    var edge_z = data.edge_z;
                    var pressure_edge_gradient = data.pressure_gradient;

                    console.log(data)
                    // Velocity and the max and min values of the velocity
                    var velocity = data.velocity;
                    var max_velocity = data.max_velocity;
                    var min_velocity = data.min_velocity;

                    //This part of code is used to initialize the variables which will be used to create cones
                    var x_cone = data.x_cone;
                    var y_cone = data.y_cone;
                    var z_cone = data.z_cone;
                    var u_cone = data.u_cone;
                    var v_cone = data.v_cone;
                    var w_cone = data.w_cone;
                    console.log(x_cone[0])

                    //Keeping a list of true and false values for the concentration and the cones which are used while displaying through layout
                    var TrueList_cones = [];
                    var FalseList_cones = [];
                    for (var i = 0; i < ncones; i++) {
                        TrueList_cones.push(true);
                        FalseList_cones.push(false);
                    };

                    //This part of the code is used to create a pressure graph
                    //Creating Edges for pressure graph
                    var pressure_trace_edges = {
                        x: edge_x,
                        y: edge_y,
                        z: edge_z,
                        mode: 'lines',
                        line: {
                            colorscale: "YlOrRd",
                            color: pressure_edge_gradient,
                            width: 5,
                            showscale: true,
                            //decrease the size of the colorbar
                            colorbar: {
                                thickness: 20,
                                len: 0.5,
                                x: 0.9,
                                y: 0.5,
                                title: {
                                    text: "Pressure",
                                    side: "right"
                                }
                            }
                        },
                        type: 'scatter3d',
                        name: "Pressure Edges",
                        hoverinfo: 'none',
                        visible: true,
                        showlegend: true,

                        //set the position of the legend
                    };

                    //This part of the code is used to create a velocity graph
                    //Creating nodes for velocity graph

                    var velocity_trace_nodes = {
                        x: x,
                        y: y,
                        z: z,
                        mode: 'markers',
                        marker: {
                            size: Array(nnodes).fill(6),
                            sizeref: 0.5, 

                            color: "rgb(200,200,200))",
                            showscale: false,
                        },
                        type: 'scatter3d',
                        name: "Velocity Nodes",
                        hoverinfo: 'none',
                        visible: false,
                        showlegend: false,
                    };

                    //Creating edges for velocity graph
                    var velocity_trace_edges = {
                        x: edge_x,
                        y: edge_y,
                        z: edge_z,
                        mode: 'lines',
                        line: {
                            color: "rgb(200,200,200)",
                            width: 5,
                            showscale: true,
                        },
                        type: 'scatter3d',
                        name: "Velocity Edges",
                        hoverinfo: 'none',
                        showlegend: false,
                        visible: false,
                        showscale: false,

                    };

                    //Creating cones for velocity graph

                    var velocity_trace_cones =[];
                    //create the cones
                    for (var i = 0; i < ncones; i++) {
                        var coneColor = velocity[i];
                        var color = 'rgb(' + (coneColor - min_velocity) * 255 / (max_velocity - min_velocity) + ', 0, ' + (max_velocity - coneColor) * 255 / (max_velocity - min_velocity) + ')'; // create the color based on the velocity
                        var coneColorScale = [[0, color], [1, color]];

                        var single_cone = {
                            x: [x_cone[i]],
                            y: [y_cone[i]],
                            z: [z_cone[i]],
                            u: [u_cone[i]],
                            v: [v_cone[i]],
                            w: [w_cone[i]],
                            type: 'cone',
                            anchor: 'tail',
                            colorscale: coneColorScale,
                            showscale: false,
                            name: 'Velocity Cones',
                            hoverinfo: 'none',
                            visible: false,
                            sizeref: 0.5
                        };
                        velocity_trace_cones.push(single_cone);
                    }

                    var nscale = [0.5, 1.0, 2.0, 4.0]
                    var steps = [];
                    for (var i = 0; i < nscale.length; i++) {
                        var visible = Array(ncones).fill(true); // all cones
                        // visible[0] = true; // set the 0th cone to be visible
                        var step = { method: "update", args: [{visible: visible, sizeref: nscale[i]}], label: nscale[i]};
                        steps.push(step);
                    };

                    var sliders = {
                        x: 0.1,
                        y: 12.0,
                        len: 0.8,
                        pad: {t: 50},
                        steps: steps,
                    };

                    var data = [velocity_trace_nodes, velocity_trace_edges, ...velocity_trace_cones, pressure_trace_edges];

                    var layout = {
                      updatemenus: [
                        {
                          x: 1.5,
                          y: 15.5,
                          yanchor: "top",
                          xanchor: "left",
                          showactive: false,
                          direction: "Right",
                          height: 8000,
                          width: 8000,
                          buttons: [
                            {
                              method: "restyle",
                              args: ["visible", [true,true,...TrueList_cones, false]],
                              label: "Velocity"
                            },
                            {
                              method: "restyle",
                              args: ["visible", [false,false,...FalseList_cones, true]],
                              label: "Pressure"
                            },
                          ],
                        },

                      ],

                      xaxis: {
                      //visible: true,
                      //showgrid: true,
                      title:{
                        text: "Values",
                        font: {
                        size: 200 // Set the desired font size for x-axis title
                      }
                      },

                    },
                    yaxis: {
                      //visible: false,
                      //showgrid: false,
                      title: "Values_2",
                      font: {
                        size: 2 // Set the desired font size for y-axis title
                      }

                    },
                    zaxis: {
                      //visible: false,
                      //showgrid: false,
                      title:{
                        text:'Values',
                        font: {
                        size: 20 // Set the desired font size for z-axis title
                      }

                      },

                    },

                      sliders: [sliders], // add the slider to the layout
                    };

                    // Define Plotly chart configuration
                    var config = {
                      // ... other chart configuration options ...
                      // Add updatemenus for format selection
                      updatemenus: [{
                        buttons: [{
                          method: 'restyle',
                          args: ['visible', [true, false]], // Show SVG trace, hide PNG trace
                          label: 'SVG'
                        }, {
                          method: 'restyle',
                          args: ['visible', [false, true]], // Show PNG trace, hide SVG trace
                          label: 'PNG'
                        }],
                        showactive: false,
                        type: 'buttons',
                        direction: 'left',
                        pad: {'r': 10, 't': 10},
                        x: 0.1,
                        xanchor: 'left',
                        y: 1.1,
                        yanchor: 'top'
                      }]
                    };

                    // Add event listener for download button
                    document.getElementById('download-btn').addEventListener('click', function() {
                      // Get currently selected format (SVG or PNG)
                      var format = network.data[0].visible[0] ? 'svg' : 'png';

                      // Convert the Plotly chart to the selected format
                      Plotly.downloadImage(network, {
                        format: format,
                        width: 1200,
                        height: 800,
                        filename: 'my_chart',
                        scale: 2
                      }).then(function(dataUrl) {
                        // Create a temporary link element to download the image
                        var link = document.createElement('a');
                        link.href = dataUrl;
                        link.download = 'my_chart.' + format; // Set filename with appropriate extension
                        document.body.appendChild(link);
                        link.click();
                        document.body.removeChild(link); // Remove the temporary link element after download
                      });
                    });

                    // Update the chart with the configured options
                    Plotly.updateConfig(config);

                        Plotly.newPlot('network', data, layout);
                    })
            </script>

    </body>
</html>

下面是输入的JSON文件：

{
    "nodes": [
        1,
        2,
        3
    ],
    "edges": [
        [
            1,
            2
        ],
        [
            2,
            3
        ],
        [
            3,
            1
        ]
        
    ],
    "nnodes": 39,
    "nedges": 52,
    "ncones": 52,
    "x": [
        121.028495788574,
        123.352821350098,
        140.785949707031
    ],
    "y": [
        116.316551208496,
        102.437530517578,
        107.810768127441
    ],
    "z": [
        59.3678894042969,
        85.5968399047852,
        94.6310577392578
    ],
    "edge_x": [
        121.028495788574,
        123.352821350098,
        null,
        123.352821350098,
        140.785949707031,
        null,
        140.785949707031,
        135.483871459961,
        null
    ],
    "edge_y": [
        116.316551208496,
        102.437530517578,
        null,
        102.437530517578,
        107.810768127441,
        null,
        107.810768127441,
        96.6482315063477,
        null
    ],
    "edge_z": [
        59.3678894042969,
        85.5968399047852,
        null,
        85.5968399047852,
        94.6310577392578,
        null,
        94.6310577392578,
        118.475326538086,
        null
    ],
    "pressure_gradient": [
        5319.79906208402,
        5319.22370839109,
        null,
        5319.22370839109,
        5317.72283129859,
        null,
        5317.72283129859,
        5316.47093892259,
        null
    ],
    "x_cone": [
        122.190658569336,
        132.069385528564,
        138.134910583496
    ],
    "y_cone": [
        109.377040863037,
        105.12414932251,
        102.229499816895
    ],
    "z_cone": [
        72.482364654541,
        90.1139488220215,
        106.553192138672
    ],
    "u_cone": [
        0.07808779308784423,
        0.856375076649549,
        -0.19742365213284796
    ],
    "v_cone": [
        -0.4662780954246829,
        0.26395186657205366,
        -0.4156386692370525
    ],
    "w_cone": [
        0.8811850170638401,
        0.44379177575368384,
        0.8878448052522355
    ],
    "velocity": [
        773.581933996682,
        3497.60743046076,
        2022.14115616565
    ],
    "max_velocity": 31155.0780437374,
    "min_velocity": 196.878430585795
    }

请随时进行更改，并让我知道，如果有任何错误的地方'var布局'和'var配置'在上述代码。

JSON

1条答案

按热度按时间
eanckbw9

eanckbw91#

这行不行：

Plotly.updateConfig(config);

这个功能不存在。把那条线拿掉。
因为Plotly.newPlot('network', data, layout);是在前面提到的之后调用的，所以它不会执行，也不会显示绘图和下拉按钮。
实际上，您可以将配置传递给newPlot：

Plotly.newPlot('network', data, layout, config);

https://plotly.com/javascript/plotlyjs-function-reference/#plotlynewplot

赞(0）分享  回复(0）举报  2023-05-02
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com