создать вызываемую функцию для нескольких диаграмм на одной странице, используя диаграмму. js и d3. js - PullRequest
Новая
       5

создать вызываемую функцию для нескольких диаграмм на одной странице, используя диаграмму. js и d3. js

0 голосов
/ 02 февраля 2020

Я использую диаграммы. js и d3. js, чтобы создать несколько диаграмм на одной странице, используя данные из файлов CSV. Я пытаюсь отобразить диаграммы из 2 разных файлов CSV, используя одну общую функцию для обоих CSV, вместо того, чтобы писать 2 отдельные функции для каждой диаграммы (мне на самом деле нужно более 15 диаграмм на странице).

Приведенный ниже код накладывает обе диаграммы в div myChart2, вместо того, чтобы помещать одну диаграмму в div myChart, а другую в div myChart2.

Кажется, что это должно быть что-то простое для выполнения , но мне не повезло.

CSV-файлы выглядят примерно так:

Месяц, Продажи
Янв, 123
Фев, 199
Мар, 155
апрель, 288
май, 300
июнь, 100
июль, 22 * ​​1016 * август, 166
сент, 169
окт, 100
ноябрь, 120
De c, 130

Заранее спасибо. 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

<style>
canvas {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
.chart-container {
    width: 33%;
    margin-left: 25px;
    margin-right: 25px;
}
.container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    text-align: left;
}
</style>
</head>
<body>

<div class="container">
    <div class="chart-container">
        <canvas id="myChart"></canvas>
    </div>

    <div class="chart-container">
        <canvas id="myChart2"></canvas>
    </div>
</div>

<script>

// Create chart for store1.
var csvFile = 'store1.csv';
d3.csv(csvFile).then(makeChart);

// Create chart for store2.
var csvFile = 'store2.csv';
d3.csv(csvFile).then(makeChart);

function makeChart(store) {
    var monthLabel = store.map(function(d){return d.Month});
    var monthSales = store.map(function(d) {return d.Sales});

    if (csvFile=="store1.csv"){
        var ctx = document.getElementById('myChart').getContext('2d');
    }

    if (csvFile=="store2.csv"){
        var ctx = document.getElementById('myChart2').getContext('2d');
    }

    var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: monthLabel,
        datasets: [
            {
                label: 'Store Data',
                data: monthSales
            }
        ]
    },
    options: {
        responsive: true,
        display: true
    }
});
}
</script>
</body>
</html>
...