winsderlich@yahoo.fr Ответов: 1

Как нарисовать круговую диаграмму с помощью chartjs

привет
я хочу нарисовать круговую диаграмму с помощью chartjs.проблема в том, что диаграмма не отображается на моей html-странице, и когда я проверяю и захожу в консоль, у меня нет ошибки. я не понимаю, что пошло не так.Пожалуйста у кого нибудь есть идея

Что я уже пробовал:

<script src="Chart.js-2.9.3/dist/Chart.js"></script>
  <script src="jquery-3.4.1.min.js"></script>
 
</head>
<body>
  <canvas id="myChart" style="width: 400%; height: 400%;"></canvas>
<script>
 $(document).ready(function(){
    var ctx = $("#myChart"). get(0).getContext("2d");
    // pie chart date
    var data = [
        {
            value: 270,
            color: "cornflowerblue",
            highligth: "lightskyblue",
            label: "corn  flover blue"

        },
        {
            value: 50,
            color: "lightgreen",
            highligth: "yellow",
            label: "lightgreen"

        },
        {
            value: 40,
            color: "orange",
            highligth: "darkorange",
            label: "Orange"

        }
    ];
    // draw
            var piechart = new Chart(ctx,{

                type : 'pie',
                data : data
                
            });

 });
        </script>
    </body>

1 Ответов

Рейтинг:
9

Richard Deeming

Пончик &амп; пирог · Chart.js документация[^]:
Для круговой диаграммы наборы данных должны содержать массив точек данных. Точки данных должны быть числом, Chart.js подсчитаем все числа и вычислим относительную долю каждого из них.

Вам также необходимо указать массив меток, чтобы всплывающие подсказки отображались правильно.
Ваш набор данных совсем не похож на документацию.
$(function() {
    var ctx = $("#myChart").get(0).getContext("2d");

    var data = {
        datasets: [{
            data: [270, 50, 40],
            backgroundColor: ["cornflowerblue", "lightgreen", "orange"],
            hoverBackgroundColor: ["lightskyblue", "yellow", "darkorange"]
        }],
        labels: ["corn flower blue", "lightgreen", "Orange"]
    };

    var piechart = new Chart(ctx, {
        type: 'pie',
        data: data
    });
});
Демонстрация[^]

winsderlich@yahoo.fr

спасибо за помощь но отображаются только метки а не сама диаграмма

Richard Deeming

Вероятно, потому, что вы установили ширину и высоту своего холста на 400%.

Измените их на 100%, согласно демо-ссылке в моем ответе, и график будет отображаться.

Richard Deeming

Или, если вы хотите, чтобы диаграмма была больше, попробуйте:

width:100vw;height:100vh;

Демонстрация[^]

winsderlich@yahoo.fr

СПАСИБО