Google 차트 색상 설정을 파일에서 다른 것으로 옮기는 방법

Question

그래서 코드가 이미있는 프로젝트에서 작업하고 있습니다.

아래의 두 파일에서 첫 번째 파일의 색상 설정을 IF 문에서 두 번째 파일로 제거해야합니다.

이유는 첫 번째 파일은 백엔드에서 정보로 삽입되지만 삽입하기 위해 데이터 세트 propeties (label, fillColor, strokeColor, pointColor, pointStrokeColor, pointHighlightFill 및 pointHighlightStroke) 배열에서 제거해야합니다. 파일 1에서 파일 2로 삽입하여 실제 데이터에서 스타일을 분리하십시오.

두 번째 파일에 단순히 데이터 세트 섹션을 추가하려했지만 아무 것도 표시하지 않았습니다. Chart.types에 추가 할 수 있습니까? .Line.extend 객체 또는 AJAX 섹션 어떻게 든? (데이터가 주입 한 것이다) :

이 파일 (1) 사전에

많은 감사

{ 
    "labels":[ 
    "1 Feb",  
    "8 Feb",  
    "15 Feb",  
    "22 Feb",  
    "29 Feb",  
    "7 Mar",  
    "14 Mar",  
    "21 Mar",  
    "28 Mar",  
    "4 Apr",  
    "11 Apr",  
    "18 Apr",  
    "25 Apr" 
    ], 
    "datasets":[ 
    { 
     "label":"Tenders", 
     "fillColor":"rgba(253,0,20,0.2)", 
     "strokeColor":"rgba(253,0,20,1)", 
     "pointColor":"#fff", 
     "pointStrokeColor":"rgba(253,0,20,1)", 
     "pointHighlightFill":"#fff", 
     "pointHighlightStroke":"rgba(253,0,20,1)", 
     "data":[ 
     77, 
     55, 
     40, 
     65, 
     59, 
     80, 
     81, 
     56, 
     55, 
     65, 
     59, 
     80, 
     75    
     ] 
    } 
    ] 
} 

파일 2 : (내가 데이터 세트의 속성이 원하는) :

if (document.getElementById("chart_div_won")) { 

    Chart.types.Line.extend({ 
     name: "LineAlt", 
     initialize: function(data) { 
      Chart.types.Line.prototype.initialize.apply(this, arguments); 
      var xLabels = this.scale.xLabels; 
      var xLabelsLength = xLabels.length; 
      xLabels.forEach(function(label, i) { 
       if (i % 4 != 0 || i <= 1 || i == xLabelsLength - 1) 
        xLabels[i] = ''; 
      }) 
     } 
    }); 

    var form_data = {}; 
    $.ajax({ 
     type: "GET", 
     url: "../../../sample_data/chart1.json", 
     data: form_data, 
     success: function(response) { 
      var ctx = document.getElementById("chart_div_won").getContext("2d"); 
      var options = { 
       responsive: true, 
       maintainAspectRatio: true, 
       pointDotRadius: 5, 
       showXLabels: 5, 
      }; 
      var myLineChart = new Chart(ctx).LineAlt(response, options); 

     }, 
     error: function() { 
      $('div#chart-container').html('<div class="notification-body"><p class="notification-heading">Loading error...</p><p class="notification-description">Unfortunatley for some reason visual data failed to load.</p></div>'); 
     }, 
     dataType: "json", 
     contentType: "application/json; charset=utf-8", 
    }); 
} 

Answer 1

그래서 지금까지이게 내가 가지고있는 것입니다 :

if (document.getElementById("chart_div_won")) { 


    Chart.types.Line.extend({ 
     name: "LineAlt", 
     initialize: function(data) { 
      Chart.types.Line.prototype.initialize.apply(this, arguments); 
      var xLabels = this.scale.xLabels; 
      var xLabelsLength = xLabels.length; 
      xLabels.forEach(function(label, i) { 
       if (i % 4 != 0 || i <= 1 || i == xLabelsLength - 1) 
        xLabels[i] = ''; 
      }) 
     } 
    }); 

    var datasets = [{ 
         "label":"Tenders", 
         "fillColor":"rgba(253,0,20,0.2)", 
         "strokeColor":"rgba(253,0,20,1)", 
         "pointColor":"#fff", 
         "pointStrokeColor":"rgba(253,0,20,1)", 
         "pointHighlightFill":"#fff", 
         "pointHighlightStroke":"rgba(253,0,20,1)"} 
     ]; 
    var form_data = {}; 

    $.ajax({ 
     type: "GET", 
     url: "../../../sample_data/chart1.json", 
     data: form_data.push(datasets), 

     success: function(response) { 
      var ctx = document.getElementById("chart_div_won").getContext("2d"); 
      var options = { 
       responsive: true, 
       maintainAspectRatio: true, 
       pointDotRadius: 5,             
       showXLabels: 5, 
      }; 
      var myLineChart = new Chart(ctx).LineAlt(response, options); 

     }, 
     error: function() { 
      $('div#chart-container').html('<div class="notification-body"><p class="notification-heading">Loading error...</p><p class="notification-description">Unfortunatley for some reason visual data failed to load.</p></div>'); 
     }, 
     data: form_data.push(datasets), 
     dataType: "json", 
     contentType: "application/json; charset=utf-8", 
    }); 
} 

데이터 집합의 배열을 추가하려고 시도한 다음 첫 번째 파일의 배열에 데이터 집합 배열에이를 추가하려고합니다. 행운은 없지만이 코드에서 구문 오류가 있다고 생각합니다.

Answer 2

누구나 이와 비슷한 문제가있는 사람에게 적합합니다. 그것은 결국 쉽습니다. 배열 끝에 각 속성을 추가하면됩니다. 그래서 배열로보고 -

코드

myLineChart.datasets[0].fillColor = "rgba(253,0,20,0.2)"; 

그리고 그렇게