Chartsjs обновляет наборы данных с выпадающим - PullRequest
Новая
       20

Chartsjs обновляет наборы данных с выпадающим

0 голосов
/ 14 февраля 2019

Хорошо, у меня есть файл chart.js на моем сайте.Теперь я пытаюсь переключаться между различными наборами данных с помощью выпадающего меню.Я получил пример диаграммы canvas.js и попытался изменить ее для своих нужд.Но я изо всех сил пытаюсь сделать это, потому что я не понимаю, как сделать это с помощью диаграмм.Может кто-нибудь показать мне, как это сделать правильно?

Вот что я уже получил:

Выпадающий список: 

<select class="form-control browser-default dropdown" id="dd">
    <option value="" selected="selected">Select Serial Number</option>
    <option value="dps1">DataPoints 1</option>
    <option value="dps2">DataPoints 2</option>
    <option value="dps3">DataPoints 3</option>
    <option value="dps4">DataPoints 4</option>
    <option value="dps5">DataPoints 5</option>
</select>
<canvas id="myChart2"></canvas>

Javascript: 

var jsonData = {
    "dps1": [
        { "x": "2016-6-25 12:58:52", "y": 10.22 },
        { "x": "2016-7-25 13:33:23", "y": 11.14 },
        { "x": "2016-8-25 13:49:18", "y": 13.58 },
        { "x": "2016-9-25 13:55:01", "y": 15.25 },
        { "x": "2016-10-25 14:00:15", "y": 17.25 },
    ],
    "dps2": [
        { "x": "2016-6-25 12:58:52", "y": 19.99 },
        { "x": "2016-7-25 13:33:23", "y": 21.78 },
        { "x": "2016-8-25 13:49:18", "y": 23.45 },
        { "x": "2016-9-25 13:55:01", "y": 24.73 },
        { "x": "2016-10-25 14:00:15", "y": 26.58 }
    ],
    "dps3": [
        { "x": "2016-6-25 12:58:52", "y": 27.66 },
        { "x": "2016-7-25 13:33:23", "y": 28.68 },
        { "x": "2016-8-25 13:49:18", "y": 30.73 },
        { "x": "2016-9-25 13:55:01", "y": 32.46 },
        { "x": "2016-10-25 14:00:15", "y": 34.79 }
    ],
    "dps4": [
        { "x": "2016-6-25 12:58:52", "y": 10.22 },
        { "x": "2016-7-25 13:33:23", "y": 11.14 },
        { "x": "2016-8-25 13:49:18", "y": 15.25 },
        { "x": "2016-9-25 13:55:01", "y": 19.99 },
        { "x": "2016-10-25 14:00:15", "y": 21.78 }
    ],
    "dps5": [
        { "x": "2016-6-25 12:58:52", "y": 24.73 },
        { "x": "2016-7-25 13:33:23", "y": 26.58 },
        { "x": "2016-8-25 13:49:18", "y": 27.66 },
        { "x": "2016-9-25 13:55:01", "y": 28.68 },
        { "x": "2016-10-25 14:00:15", "y": 32.46 }
    ]}



var dataPoints = [];
var ctx = document.getElementById('myChart2').getContext('2d');
var chart = new Chart(ctx, {
    // The type of chart we want to create
    type: 'line',

    // The data for our dataset
    data: {
        labels: <?php echo json_encode($json1); ?>,
        datasets: [{
            label: "My First dataset",
            borderColor: 'rgb(255, 99, 132)',
            data: dataPoints,
        }]
    },

    // Configuration options go here
    options: {
        scales: {
            yAxes: [{
                display: true,
                ticks: {
                    suggestedMin: 0,
                    suggestedMax: 100
                }
            }]
        }
    }
});

$( ".dropdown" ).change(function() {
    chart.data.datasets.data = [];
    var e = document.getElementById("dd");
    var selected = e.options[e.selectedIndex].value;
    dps = jsonData[selected];
    for(var i in dps) {
        chart.data.datasets.data.push({x: dps[i].x, y: dps[i].y});
    }
    chart.update();
});

Примечание: <?PHP echo json_encode($json1); ?> в настоящее время используется для установки данных по оси X.Это даты.Позже я планирую динамически строить значения jsonData x и y со значениями из базы данных, но сейчас я был бы рад получить раскрывающийся список, работающий с этими статическими значениями.

Вот пример canvasjs: canvasjs

Ответы [ 2 ]

0 голосов
/ 18 июля 2019 
  var data = {
appleData : {
      label: 'apples',
      data: [12, 19, 3, 17, 6, 3, 7],
      backgroundColor: "rgba(153,255,51,0.6)"
},
orangeData : {
  label: 'oranges',
  data: [2, 29, 5, 5, 2, 3, 10],
  backgroundColor: "rgba(255,153,0,0.6)"
}
}

var ctx = document.getElementById('myChart').getContext('2d');
function updatechart() {
var e = document.getElementById("dd");
var dd = e.options[e.selectedIndex].value;
var fruitData = {
  labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
  datasets: [data[dd]] 
}
var myChart = new Chart(ctx, {
     type: 'line',
     data: fruitData
   });

  }
0 голосов
/ 14 февраля 2019

Используйте этот хороший учебник: chart.js Учебник (И измените свой код на метод chart.js)

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

chart.update ()

, чтобы внести изменения в объект диаграммы для визуализации в HTML.

...