Chart.js创建

q43xntqr  于 2022-11-23  发布在  Chart.js
关注(0)|答案(1)|浏览(167)

我正在使用Chart.js创建一个图表,但是由于某种原因,它没有创建。什么都没有发生,字面上。控制台也是空的,即使我使用console.log。下面我将显示代码和html,可能我不能注意到一些错误。真的不明白是什么问题。请帮助!
HTML语言

<div class="chart">
<canvas id="myChart" width="400" height="150"></canvas>

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

JS系统

function removeElementsByClass(className)
{
    const elements = document.getElementsByClassName(className);
    while(elements.length > 0)
    {
        elements[0].parentNode.removeChild(elements[0]);
    }
}

function draw_graph(graph_data, header)
{
    var accepted = [], rejected = [], timestamps = [];

    if(typeof header === 'undefined') header = '';

    for(var timestamp in graph_data)
    {

        accepted.push(Math.round(graph_data[timestamp]['a']));
        timestamps.push(timestamp);
    }
    Chart.defaults.global.defaultFontFamily = 'Verdana';
    Chart.defaults.global.defaultFontStyle = 'normal';
    Chart.defaults.global.defaultFontColor = '#0B6FAB';
    Chart.defaults.global.defaultFontSize = 11;
    Chart.defaults.global.legend = false;

    removeElementsByClass('chartjs-hidden-iframe'); 

new Chart(document.getElementById("myChart"), {
    type:'line',
    data:
    {
        labels: timestamps,
        datasets: [{
                label: "accepted",
                data: accepted,
                borderColor: '#0B6FAB',
                backgroundColor: '#CBFFFF',
                borderWidth: 2,
                fill: false,
                pointRadius: 0
            }

        ]
    },
    options:
    {
        title:
        {
            display: true,
            text: header,
            fontSize: 16
        },

        legend:
        {
            labels:
            {
                fontColor: '#C0C0C0'
            }
        },

        scales: {
            yAxes: [{
                position: 'right',
                gridLines: {
                    drawBorder: false,
                    display:false
                },
        display: false,
                ticks: {
                    beginAtZero: true,
                    maxTicksLimit: 3,
                    fontStyle: 'bold',
                    fontColor: '#C0C0C0',
                    fontSize: 9,
                    userCallback: function(label, index, labels)
                    {
                        if(label !== 0)
                        {
                            return label;
                        }
                    },

                },
                scaleLabel: {
                },
                pointLabels:
                {
                }
            }],

            xAxes: [{
                gridLines: {
                    drawBorder: false,
                    display:true
                },

                ticks: {
                    beginAtZero: true,
                    autoSkip: true,
                    maxTicksLimit: 6,
                    fontColor: '#C0C0C0',
                    fontSize: 9,
                    maxRotation: 0,
                    minRotation: 0
                }
            }]
        }
    }});
};
yyhrrdl8

yyhrrdl81#

一开始有一个打字错误显示在控制台错误中(在缩放设置中缺少一个',')。另一个问题是在页面加载后,您实际上没有调用draw_graph函数。类似以下内容将帮助您开始:

document.addEventListener("DOMContentLoaded", function(event) {
        // Your code to run since DOM is loaded and ready
        draw_graph(["one", "two", "three"], "test");
    });

相关问题