ChartJS：它没有在Django的html中显示

ohtdti5x 于 2022-11-07 发布在 Chart.js

关注(0)|答案(2)|浏览(198)

我将在html中绘制水平条形图，但它没有显示。我从www.example.com发送2个变量views.py是{{top5StockCode}}和{{top5TotalSales}}。
www.example.com发送的{{top5StockCode}}的值views.py为
[“23166”，“21108”，“85123A”，“48185”，“22470”]
和{{top5TotalSales}}之间的关系
[第2671740号、第227322号、第171770号、第158120号、第143808号]。
这是我在html文件中的代码。

<div class="top5">
    <p class="topicTop5">Top 5 Selling Products</p>
    <canvas id="top5"></canvas>
</div>
<script>
    var top5 = document.getElementById('top5').getContext('2d');
    var chart = new Chart(top5, {
        type: 'horizontalBar',
        data: {
            labels: {{top5StockCode}},
            datasets: [{
                label: 'Top 5 selling products ',
                backgroundColor: '#CE3B21',
                borderColor: 'rgb(255, 99, 132)',
                data: {{top5TotalSales}}
            }]
        },
        options: {   
            legend: { 
                display: false
            },
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                yAxes: [{
                    ticks: {
                         beginAtZero:true
                    }
                }]
            }
        }
    });
</script>

我很困惑为什么它不显示图形。请帮助我。谢谢

chart.js

来源：https://stackoverflow.com/questions/61394054/chartjs-its-not-showing-in-html-on-django

2条答案

按热度按时间

whhtz7ly1#

您的代码看起来运行良好。下面是一个使用您的数据的jsfiddle。
因此，您可能需要在模板中将数组写为json，如{{ top5StockCode|safe }}和{{top5TotalSales|safe}}
因此最终代码应该是：

<div class="top5">
    <p class="topicTop5">Top 5 Selling Products</p>
    <canvas id="top5"></canvas>
</div>
<script>
    var top5 = document.getElementById('top5').getContext('2d');
    var chart = new Chart(top5, {
        type: 'horizontalBar',
        data: {
            labels: {{top5StockCode|safe}},
            datasets: [{
                label: 'Top 5 selling products ',
                backgroundColor: '#CE3B21',
                borderColor: 'rgb(255, 99, 132)',
                data: {{top5TotalSales|safe}}
            }]
        },
        options: {   
            legend: { 
                display: false
            },
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                yAxes: [{
                    ticks: {
                         beginAtZero:true
                    }
                }]
            }
        }
    });
</script>

赞(0）回复(0）举报 2022-11-07

enxuqcxy2#

我想你忘了把图书馆包括进去

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>

试试这个代码

<div class="top5">
    <p class="topicTop5">Top 5 Selling Products</p>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
    <canvas id="top5"></canvas>
</div>
<script>
    var top5 = document.getElementById('top5').getContext('2d');
    var chart = new Chart(top5, {
        type: 'horizontalBar',
        data: {
            labels: {{top5StockCode|safe}},
            datasets: [{
                label: 'Top 5 selling products ',
                backgroundColor: '#CE3B21',
                borderColor: 'rgb(255, 99, 132)',
                data: {{top5TotalSales|safe}}
            }]
        },
        options: {   
            legend: { 
                display: false
            },
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                yAxes: [{
                    ticks: {
                         beginAtZero:true
                    }
                }]
            }
        }
    });
</script>

赞(0）回复(0）举报 2022-11-07

我来回答

ChartJS：它没有在Django的html中显示

2条答案

相关问题

热门标签

最新问答