Как добавить еще одну полосу набора данных с диаграммой. js - PullRequest
Новая
       21

Как добавить еще одну полосу набора данных с диаграммой. js

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

Следующий сценарий работает нормально, но это только 1 полоса на этикетку. Мне нужно, чтобы на каждой этикетке было 2 столбика. Я пробовал много вариантов, с запятыми и без них и "{}". Любая помощь будет очень признательна. Спасибо 

    <script>
    // Bar Chart Example
    var ctx = document.getElementById("myBarChart");
    var myLineChart = new Chart(ctx, {
    type: 'bar',
    data: {
    labels: ["<?php echo $barista_pass_code[1] ?>", "<?php echo $barista_pass_code[2] ?>", "<?php echo $barista_pass_code[3] ?>", 
    "<?php echo $barista_pass_code[4] ?>", "<?php echo $barista_pass_code[5] ?>", "<?php echo $barista_pass_code[6] ?>",
    "<?php echo $barista_pass_code[7] ?>", "<?php echo $barista_pass_code[8] ?>", "<?php echo $barista_pass_code[9] ?>",
    "<?php echo $barista_pass_code[10] ?>", "<?php echo $barista_pass_code[11] ?>", "<?php echo $barista_pass_code[12] ?>"],
    datasets: [{
    label: "Regular Punches",
    backgroundColor: "rgba(2,117,216,1)",
    borderColor: "rgba(2,117,216,1)",

    data: [<?php echo $last_regular_qty[1] ?>, <?php echo $last_regular_qty[2] ?>, <?php echo $last_regular_qty[3] ?>,
    <?php echo $last_regular_qty[4] ?>, <?php echo $last_regular_qty[5] ?>, <?php echo $last_regular_qty[6] ?>,
    <?php echo $last_regular_qty[7] ?>,<?php echo $last_regular_qty[8] ?>,<?php echo $last_regular_qty[9] ?>,
    <?php echo $last_regular_qty[10] ?>, <?php echo $last_regular_qty[11] ?>, <?php echo $last_regular_qty[12] ?> ],

    }],
    },
    options: {
    scales: {
    xAxes: [{
    time: {
    unit: 'Barista ID'
    },
    gridLines: {
    display: false
    },
    ticks: {
    maxTicksLimit: 36
    }
    }],
    yAxes: [{
    ticks: {
    min: 0,
    max: 50,
    maxTicksLimit: 12
    },
    gridLines: {
    display: true
    }
    }],
    },
    legend: {
    display: false
    }
    }
    });
    </script>

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

    <script>
    // Bar Chart Example
    var ctx = document.getElementById("myBarChart");
    var myLineChart = new Chart(ctx, {
    type: 'bar',
    data: {
    labels: ["<?php echo $barista_pass_code[1] ?>", "<?php echo $barista_pass_code[2] ?>", "<?php echo $barista_pass_code[3] ?>", 
    "<?php echo $barista_pass_code[4] ?>", "<?php echo $barista_pass_code[5] ?>", "<?php echo $barista_pass_code[6] ?>",
    "<?php echo $barista_pass_code[7] ?>", "<?php echo $barista_pass_code[8] ?>", "<?php echo $barista_pass_code[9] ?>",
    "<?php echo $barista_pass_code[10] ?>", "<?php echo $barista_pass_code[11] ?>", "<?php echo $barista_pass_code[12] ?>"],
    datasets: [{
    label: "Regular Punches",
    backgroundColor: "rgba(2,117,216,1)",
    borderColor: "rgba(2,117,216,1)",

    data: [<?php echo $last_regular_qty[1] ?>, <?php echo $last_regular_qty[2] ?>, <?php echo $last_regular_qty[3] ?>,
    <?php echo $last_regular_qty[4] ?>, <?php echo $last_regular_qty[5] ?>, <?php echo $last_regular_qty[6] ?>,
    <?php echo $last_regular_qty[7] ?>,<?php echo $last_regular_qty[8] ?>,<?php echo $last_regular_qty[9] ?>,
    <?php echo $last_regular_qty[10] ?>, <?php echo $last_regular_qty[11] ?>, <?php echo $last_regular_qty[12] ?> ],

    data: [<?php echo $last_large_qty[1] ?>, <?php echo $last_large_qty[2] ?>, <?php echo $last_large_qty[3] ?>,
    <?php echo $last_large_qty[4] ?>, <?php echo $last_large_qty[5] ?>, <?php echo $last_large_qty[6] ?>,
    <?php echo $last_large_qty[7] ?>,<?php echo $last_large_qty[8] ?>,<?php echo $last_large_qty[9] ?>,
    <?php echo $last_large_qty[10] ?>, <?php echo $last_large_qty[11] ?>, <?php echo $last_large_qty[12] ?> ],

    }],
    },
    options: {
    scales: {
    xAxes: [{
    time: {
    unit: 'Barista ID'
    },
    gridLines: {
    display: false
    },
    ticks: {
    maxTicksLimit: 36
    }
    }],
    yAxes: [{
    ticks: {
    min: 0,
    max: 50,
    maxTicksLimit: 12
    },
    gridLines: {
    display: true
    }
    }],
    },
    legend: {
    display: false
    }
    }
    });
    </script>

1 Ответ

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

Я знал, что был близок! Все дело в правильном расположении "запятых, скобок и т. д." 

data: {
  labels: ["<?php echo $barista_pass_code[1] ?>", "<?php echo $barista_pass_code[2] ?>", "<?php echo $barista_pass_code[3] ?>",
    "<?php echo $barista_pass_code[4] ?>", "<?php echo $barista_pass_code[5] ?>", "<?php echo $barista_pass_code[6] ?>",
    "<?php echo $barista_pass_code[7] ?>", "<?php echo $barista_pass_code[8] ?>", "<?php echo $barista_pass_code[9] ?>",
      "<?php echo $barista_pass_code[10] ?>", "<?php echo $barista_pass_code[11] ?>", "<?php echo $barista_pass_code[12] ?>"],
  datasets: [{
    label: "Regular Punches",
    backgroundColor: "rgba(2,117,216,1)",
    borderColor: "rgba(2,117,216,1)",
    data: [<?php echo $last_regular_qty[1] ?>, <?php echo $last_regular_qty[2] ?>, <?php echo $last_regular_qty[3] ?>,
    <?php echo $last_regular_qty[4] ?>, <?php echo $last_regular_qty[5] ?>, <?php echo $last_regular_qty[6] ?>,
    <?php echo $last_regular_qty[7] ?>,<?php echo $last_regular_qty[8] ?>,<?php echo $last_regular_qty[9] ?>,
    <?php echo $last_regular_qty[10] ?>, <?php echo $last_regular_qty[11] ?>, <?php echo $last_regular_qty[12] ?> ]},
    {
    data: [<?php echo $last_regular_qty[1] ?>, <?php echo $last_regular_qty[2] ?>, <?php echo $last_regular_qty[3] ?>,
    <?php echo $last_regular_qty[4] ?>, <?php echo $last_regular_qty[5] ?>, <?php echo $last_regular_qty[6] ?>,
    <?php echo $last_regular_qty[7] ?>,<?php echo $last_regular_qty[8] ?>,<?php echo $last_regular_qty[9] ?>,
    <?php echo $last_regular_qty[10] ?>, <?php echo $last_regular_qty[11] ?>, <?php echo $last_regular_qty[12] ?> ]

  }]
},
...