Сделайте 2 графика, используя график js - PullRequest
Новая
       7

Сделайте 2 графика, используя график js

0 голосов
/ 29 апреля 2020

Итак, я хочу попробовать сделать сайт, который включает в себя графики. Я использовал диаграмму. js для этого. Теперь я пытаюсь создать две диаграммы, поэтому я скопировал одну из них и изменил ее переменную, но она не отображается на моей странице html. Я хочу спросить: возможно ли сделать 2 графика, используя график? js, и я сделал это неправильно, или я могу сделать только один график? Спасибо. Кстати, вот мой код 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <title>Chart Page</title>
</head>

<body>
    <div class="container">
        <canvas id="myChart"></canvas>
        <canvas id="myChart2"></canvas>
    </div>

    <script>
        let myChart = document.getElementById('myChart').getContext('2d');

        let massPopChart = new Chart(myChart, {
            type: 'bar',
            data: {
                labels:['Boston', 'Worcester', 'Springfield', 'Lowell', 'Cambridge', 'New Bedford'],
                datasets:[{
                    label : 'Population',
                    data: [
                    617594,
                    181045,
                    153060,
                    106519,
                    105162,
                    95072
                    ],
                }]
            },
            options : {},
        });
    </script>

    <script>
        let myChart2 = document.getElementById('myChart2').getContext('2d');

        let massPopChart = new Chart(myChart2, {
            type: 'bar',
            data: {
                labels:['Boston', 'Worcester', 'Springfield', 'Lowell', 'Cambridge', 'New Bedford'],
                datasets:[{
                    label : 'Population',
                    data: [
                    617594,
                    181045,
                    153060,
                    106519,
                    105162,
                    95072
                    ],
                }]
            },
            options : {},
        });
    </script>
</body>

1 Ответ

0 голосов
/ 29 апреля 2020

Вы используете одно и то же имя переменной для обеих диаграмм, massPopChart. Вам просто нужно изменить имя переменной на massPopChart1 и massPopChart2.

Просто проверьте правильность работы здесь https://jsfiddle.net/4gdtujve/

...