Блог

Главная - Вопросы по программированию - Существует вероятность того, что вы, возможно, не включили свойство «данные» в серию

Существует вероятность того, что вы, возможно, не включили свойство «данные» в серию

#javascript #apexcharts

Вопрос:

Я пытаюсь добавить ряд из mydict в диаграмму Ганта.

Я хочу иметь возможность просмотреть диаграмму Ганта.

Но я пока даже не могу добавить новые данные.

Я также пробовал методы updateSeries и appendData.

Нужно ли мне использовать смесь методов для того, чего я пытаюсь достичь?

Я не понимаю, почему он не может прочитать свойство данных.

Пожалуйста, запустите код, чтобы увидеть ошибку самостоятельно.

Спасибо.

 <!DOCTYPE html>
<html>
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- ApexChart -->
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
</head>
<body>

<div class="content-section">
    <div id="chart"></div>
</div>
</body>
<script>
var mydict = {'positions': [{'position': '1', 'start': 1627250400.0, 'end': 1627250400.0}, {'position': '12', 'start': 1627077600.0, 'end': 1627509600.0}, {'position': '6', 'start': 1625781600.0, 'end': 1625781600.0}, {'position': '1', 'start': 1625695200.0, 'end': 1625954400.0}, {'position': '1', 'start': 1625608800.0, 'end': 1625781600.0}]}

console.log(mydict.positions.length)
console.log(mydict.positions[1].position)
console.log(mydict.positions[1].start)

var options = {
        series: [
        {
            name: '1',
            data: [
                {x:'Position', y: [192198, 392199]},
            ]
        },
        {
            name: '2',
            data: [
                {x:'Position', y: [792198, 792199]},
            ]
        }
        ],
        chart: {
        type: 'rangeBar',
        height: 350
    },
    xaxis: {
        type: 'datetime'
    },
    plotOptions: {
        bar: {
        horizontal: true
        }
    },
    legend: {
          position: 'top',
          horizontalAlign: 'left'
    }
};
document.getElementById('chart').innerHTML = '';
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
for (i = 0; i < mydict.positions.length; i  ) {
    chart.appendSeries([{
        name: mydict.positions[i].position,
        data: [{x:'position', y: [mydict.positions[i].start, mydict.positions[i].end]}]
    }]);
}
</script>

Ответ №1:

Нашел решение.

Мне пришлось удалить скобки в методе appendSeries.

 for (i = 0; i < mydict.positions.length; i  ) {
    chart.appendSeries({
        name: mydict.positions[i].position,
        data: [{x:'position', y: [mydict.positions[i].start, mydict.positions[i].end]}]
    });
}
Метки: , , ,