Highcharts - Как мне использовать поля ввода HTML для ввода данных для диаграммы P ie? - PullRequest
Новая
       83

Highcharts - Как мне использовать поля ввода HTML для ввода данных для диаграммы P ie?

0 голосов
/ 06 августа 2020

Извините, это мой первый вопрос о переполнении стека, поэтому дайте мне знать, если я его неправильно отформатировал.

Я пытался использовать document.getElementById("id").value, чтобы получить входное значение из поля ввода, но не смог Не совсем понимаю, как заставить его работать. Я видел другие ответы, в которых использовались JSON или JQuery, но у меня пока нет большого опыта в них, поэтому, если бы я мог сделать эту работу без них (если возможно), я выберу этот вариант. Любые закомментированные фрагменты кода - это всего лишь мои попытки заставить его работать. (Примечание: я знаю, что мой код HTML может быть немного потрепан, сейчас это не является приоритетом)

image

Я бы сделал ссылку на JSFiddle , но не знаю, как Я бы сделал это, поскольку мой JS в настоящее время встроен в мой HTML lol. Заранее спасибо всем, кто решит помочь мне с этим. Любые советы по этому поводу будут полезны!

1 Ответ

1 голос
/ 06 августа 2020

Вам необходимо получить данные и поместить их в формат, требуемый Highcharts. Простой пример ниже: 

document.getElementById('btn').addEventListener('click', function() {
    var data = [
        parseInt(document.getElementById('data1').value),
        parseInt(document.getElementById('data2').value)
    ];

    Highcharts.chart('container', {
        series: [{
            type: 'pie',
            data
        }]
    });
});

Живая демонстрация: http://jsfiddle.net/BlackLabel/dyp5208b/

Ссылка API: https://api.highcharts.com/highcharts/series.pie.data

...