как можно составить диаграмму наборов данных вызова js на основе значения из опции выбора? - PullRequest
2 голосов
/ 27 октября 2019

Я пытаюсь получить значение из опции выбора динамически, а затем использовать значение для создания новой диаграммы в зависимости от значения.

Не работает:

new Chart(context).Bar(callchart);

Но это работает:

new Chart(context).Bar(keyboard);

при статическом вызове.

<select>
    @foreach($item_name as $in)
      <option id="{{$in->item_name}}" value="{{$in->item_name}}">{{$in->item_name}} </option>
    @endforeach
</select>
<canvas id="graph" width="800px" height="400px"></canvas>

var Mouse= {
labels:  ['January','February','March'],

datasets: [
    {
      fillColor: "rgba(220,220,220,0.2)",
      strokeColor: "rgba(220,220,220,1)",
      pointColor: "rgba(220,220,220,1)",
      pointStrokeColor: "#fff",
      pointHighlightFill: "#fff",
      pointHighlightStroke: "rgba(220,220,220,1)",
      data: [30,120,90]
    },
]
};

var keyboard = {
labels: ['March', 'Apr', 'May'],

datasets: [
    {
      fillColor: "rgba(220,220,220,0.2)",
      strokeColor: "rgba(220,220,220,1)",
      pointColor: "rgba(220,220,220,1)",
      pointStrokeColor: "#fff",
      pointHighlightFill: "#fff",
      pointHighlightStroke: "rgba(220,220,220,1)",
      data: [50,100,140]
    },
]
};


var Spoon ={
labels: ['June', 'July', 'August'],

datasets: [
    {
    fillColor: "rgba(220,220,220,0.2)",
    strokeColor: "rgba(220,220,220,1)",
    pointColor: "rgba(220,220,220,1)",
    pointStrokeColor: "#fff",
    pointHighlightFill: "#fff",
    pointHighlightStroke: "rgba(220,220,220,1)",
    data: [1,2,3]
    },
]
};

var context = document.querySelector('#graph').getContext('2d');

if(window.bar != undefined)
  window.bar.destroy(); 

window.bar = new Chart(context).Bar(keyboard);

$("select").on('change', function() {
  //GETING VALUE FROM SELECT OPTION
  var callchart =this.value; 
  var context = document.querySelector('#graph').getContext('2d');
  if(window.bar != undefined)
    window.bar.destroy(); 
  //CREATING CHART USING VALUE FROM SELECT OPTION
  window.bar = new Chart(context).Bar(callchart);
});

</script>

Uncaught TypeError: Невозможно прочитать свойство 'length' из неопределенного

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...