在我的 html 网页中根本不呈现 Plotly 图表

Question

我一直在尝试学习 chart.js 和 plotly.js 等图表库。我能够让 chart.js 进行渲染，但 plotly.js 无法正常工作，即使我也尝试使用他们文档中的非常简单的代码。我想不通哪里错了。

我尝试在同一个文件中使用 chart.js 和 plotly.js cdn，我打算在同一个页面中呈现这两个图形。我很乐意让 chart.js 代码正常工作，不幸的是我仍在努力 Plotly.js 来呈现一个简单的图形。

代码：

<!DOCTYPE html>
<html>
<head>
    <title>Dashboard - Plate</title>

<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<script type="text/javascript" src = 'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js'></script>
<script type="text/javascript" src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
    <div class='container mt-5'>
            <div class='rw'>        
                <form  action='/' method='POST'>
                    {% csrf_token %}
                    <div class='row'>
                        <div class='col-3'>
                            <input type="text" class="form-control" name="daterange" value="01/01/2020 - 01/15/2020" />
                        </div>
                        <div class='col-3'>
                            <select class="custom-select" id="inputGroupSelect01" name='franchise'>
                                
                                <option value="1" selected>One</option>
                                <option value="2">Two</option>
                                <option value="3">Three</option>
                             </select>
                        </div>
                        <div class='col-2'>
                            <input type="submit" class="btn btn-info" name="button" value="Submit" />
                        </div>
                    </div>
                </form>
                <div class='row mt-5'>
                    <canvas id='myChart' height=90></canvas>
                </div>
                <div class='row mt-5'>
                    <canvas id='myplot'></canvas>
                </div>
        </div>
        
    </div>



</body>
<!-- JS, Popper.js, and jQuery -->

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

<script>
$(function() {
  $('input[name="daterange"]').daterangepicker({
    opens: 'left'
  }, function(start, end, label) {
    console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
  });
});
</script>


<!--Later these scripts ll be moved to a js file under static folder directory-->

<script type="text/javascript">
var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: {{xaxis|safe}},
        datasets: {{data_Categoryline|safe}}
    },
    options: {
        title: {
            display: true,
            text: 'Category wise Trend'
        },
        scales: {
            xAxes: [{
                type: 'logarithmic',
                type : 'time',
                distribution: 'series',
                 time : {
                    displayFormats : {
                        day: 'MMM D'
                    }              

                },
                display : true,
                scaleLabel :{
                    display : true,
                    labelString : 'Across the days/weeks/months'
                }           
            }],
            yAxes: [{
                type: 'logarithmic',

                scaleLabel :{
                    display : true,
                    labelString : 'Total Amount'
                } 

            }]
        },
        legend: {
            position : 'right'
        }
    }
});
</script>
<script type="text/javascript">
    var pltly = document.getElementById('myplot');
    var trace1 = {
  x: [1, 2, 3, 4],
  y: [10, 15, 13, 17],
  type: 'scatter'
};

var trace2 = {
  x: [1, 2, 3, 4],
  y: [16, 5, 11, 9],
  type: 'scatter'
};

var data = [trace1, trace2];


Plotly.newPlot(pltly, data);
</script>
</html>

Answer 1

Plotly.newPlot() 的引用表明传递给它的元素应该是 div。

graphDiv

The functions documented here all create or modify a plot that is drawn into a element on the page, commonly referred to as graphDiv or plotDiv.

在您的代码中，这将是一个快速修复：

<div id='myplot'></div>

而不是：

<canvas id='myplot'></canvas>

在我的 html 网页中根本不呈现 Plotly 图表

Plotly graphs not at all rendering in my html webpage

plotly.js