Chart.js가 값 데이터를 동적으로 전달합니다.

Question

아약스로 데이터와 레벨을 동적으로 사용하고 싶습니다. 아래에서 사용하고 있지만 작동하지는 않습니다.

내 아약스는 json_encode의 PHP 데이터를 반환합니다. 내 코드는 다음과 같습니다

success: function (result) { 
      result = JSON.parse(result); 
      var labels = result['labels']; 
      var data = result['data']; 
      //console.log(data); 
      var ctx = document.getElementById("chartbtc"); 
      var myChart = new Chart(ctx, { 
        type: 'line', 
        data: { 
         labels: [labels], 
         datasets: [{ 
          label: 'Market Price (USD)', 
          data: [data], 
          backgroundColor: [ 
           'rgba(255, 99, 132, 0.2)', 
           'rgba(54, 162, 235, 0.2)', 
           'rgba(255, 206, 86, 0.2)', 
           'rgba(75, 192, 192, 0.2)', 
           'rgba(153, 102, 255, 0.2)', 
           'rgba(255, 159, 64, 0.2)' 
          ], 
          borderColor: [ 
           'rgba(255,99,132,1)', 
           'rgba(54, 162, 235, 1)', 
           'rgba(255, 206, 86, 1)', 
           'rgba(75, 192, 192, 1)', 
           'rgba(153, 102, 255, 1)', 
           'rgba(255, 159, 64, 1)' 
          ], 
          borderWidth: 1 
         }] 
        }, 
        options: { 
         responsive: true, 
         maintainAspectRatio: false, 
         scales: { 
          yAxes: [{ 
           ticks: { 
            beginAtZero: false 
           } 
          }] 
         } 
        } 
       }); 
     } 

그러나 차트가 생성되지 않습니다

아약스의 결과는 다음과 같습니다

당신이 당신의 아약스 결과를 제공했기 때문에

{"labels":"13-Nov-2017, 14-Nov-2017, 15-Nov-2017, 16-Nov-2017, 17-Nov-2017, 18-Nov-2017, 19-Nov-2017, 20-Nov-2017, 21-Nov-2017, 22-Nov-2017, 23-Nov-2017, 24-Nov-2017, 25-Nov-2017, 26-Nov-2017, 27-Nov-2017, 28-Nov-2017, 29-Nov-2017, 30-Nov-2017, 01-Dec-2017, 02-Dec-2017, 03-Dec-2017, 04-Dec-2017, 05-Dec-2017, 06-Dec-2017, 07-Dec-2017, 08-Dec-2017, 09-Dec-2017, 10-Dec-2017, 11-Dec-2017, 12-Dec-2017","data":"6550.22, 6635.41, 7301.42, 7815.03, 7786.88, 7817.14, 8007.65, 8255.59, 8059.8, 8268.03, 8148.94, 8250.97, 8707.4, 9284.14, 9718.29, 9952.5, 9879.32, 10147.37, 10883.91, 11071.36, 11332.62, 11584.82, 11878.43, 13540.98, 16501.97, 16007.43, 15142.83, 14869.8, 16762.11, 17276.39"} 

Answer 1

이 차트 생성 작동하지 않습니다. 귀하의 경우에 result["labels"]은 문자열이며 전체 문자열 (labels 속성에는 유효하지 않으며 작동하지 않을 것입니다) 인 1 개의 요소로 목록을 작성하는 것입니다. 당신이해야 할 일은 문자열을 분할하고 올바르게 포맷 한 다음 목록으로 labels 속성에 공급하는 것입니다. 가장 쉬운 방법은 split() 함수를 사용하는 것이고, 귀하의 경우에는 ", "으로 나눌 수 있습니다. 가능하다면 더 나은 응답을 구현하는 것이 좋습니다 (예 : {"labels": ["13-Nov-2017", "14-Nov-2017", ...]}).

희망이 도움이됩니다.

Answer 2

처음으로 차트를 자신의 값으로 채울 수 있지만 동적으로 데이터를 추가 할 때 canvas 요소를 제거하고 다시 생성해야합니다. 차트에 데이터가 동적으로 추가됩니다.

다음과 같이 시도해 볼 수 있습니다.

<canvas id="chartbtc" class="canvasChart"></canvas> 

<script> 

    dynamicDataAppendOnChart(labels, data); // On page loading you will be having your own data so you can pass them, or if you want that to be happen with ajax when page loading itself you can trigger the click event. 

    $('#btnClick').trigger('click'); 

    // You will be calling the function with click event... 
    $('#btnClick').on('click', function() { 
     var data = '', labels = ''; 
     $.ajax({ 
      url: url, 
      type: "POST", 
      data: data, 
      async: isAsync, 
      success: function (result) { 
       result = JSON.parse(result); 
       labels = result['labels']; 
       data = result['data']; 
      } 
     }); 
     dynamicDataAppendOnChart(labels, data); // Now you can call the function by passing labels and data 
    }); 

    function dynamicDataAppendOnChart() { 
     $('#chartbtc').remove(); 
     $('#appendTheCanvasElement').append('<canvas id="chartbtc" class="canvasChart"><canvas>'); // This would create new canvas element every time and removes the older one. 
     var ctx = document.getElementById("chartbtc"); 
     var myChart = new Chart(ctx, { 
      type: 'line', 
      data: { 
       labels: [labels], 
       datasets: [{ 
        label: 'Market Price (USD)', 
        data: [data], 
        backgroundColor: [ 
         'rgba(255, 99, 132, 0.2)', 
         'rgba(54, 162, 235, 0.2)', 
         'rgba(255, 206, 86, 0.2)', 
         'rgba(75, 192, 192, 0.2)', 
         'rgba(153, 102, 255, 0.2)', 
         'rgba(255, 159, 64, 0.2)' 
        ], 
        borderColor: [ 
         'rgba(255,99,132,1)', 
         'rgba(54, 162, 235, 1)', 
         'rgba(255, 206, 86, 1)', 
         'rgba(75, 192, 192, 1)', 
         'rgba(153, 102, 255, 1)', 
         'rgba(255, 159, 64, 1)' 
        ], 
        borderWidth: 1 
       }] 
      }, 
      options: { 
       responsive: true, 
       maintainAspectRatio: false, 
       scales: { 
        yAxes: [{ 
         ticks: { 
          beginAtZero: false 
         } 
        }] 
       } 
      } 
     }); 
    } 
</script> 

Answer 3

시도해보십시오.

labels: labels, 
    data: data, 

에

var labels = result['labels'].split(","); // Return Array of Strings Of labels 
var data = JSON.parse("[" + result['data'] + "]");// return array of data 

CHAGE

labels: [labels], 
data: [data], 

로 선언 라벨 및 데이터가 이미 배열에