다중 시리즈 꺾은 선형 차트를 만드는 방법

Question

아래의 [이름] 열에서 어떻게 다중 시리즈 꺾은 선형 차트를 만들 수 있습니까? 현재 [날짜] 및 [태그] 포인트를 사용하여 차트를 플롯하고 있습니다. 그러나 각 이름에 대해 다중 시리즈 선 차트를 표시하려고합니다. 이럴 가능성이 있거나이 작업을 수행하려면 API와 연결하기 위해 수동 기능을 만들어야합니다.

상담하십시오.

function drawVisualization() { 
     // Prepare the data 
     var data = google.visualization.arrayToDataTable([ 
      ['Name', 'Tag', 'Date'], 
      ['ACCA', 45, 'May 14'], 
      ['ABBA', 85, 'May 14'], 
      ['ANNA', 100, 'May 14'], 
      ['AMMA', 100.5, 'May 14'], 
      ['ACCA', 99.5, 'May 15'], 
      ['ABBA', 85.5, 'May 15'], 
      ['ACCA', 99.6, 'May 15'], 
      ['BACM', 94, 'May 15'], 
      ['MMBS', 96, 'May 15'] 
     ]); 

     // Define category pickers for 'Name', 
     var countryPicker = new google.visualization.ControlWrapper({ 
      'controlType': 'CategoryFilter', 
      'containerId': 'control1', 
      'options': { 
       'filterColumnLabel': 'Name', 
       'ui': { 
        'labelStacking': 'vertical', 
        'allowTyping': false, 
        'allowMultiple': false 
       } 
      } 
     }); 

     var barChart = new google.visualization.ChartWrapper({ 
      'chartType': 'LineChart', 
      'containerId': 'chart1', 
      'options': { 
       'width': 400, 
       'height': 300, 
       'chartArea': { top: 0, right: 0, bottom: 0 } 
      }, 
      // Configure the Linechart to use columns 2 (Date) and 1 (Tag) 
      'view': { 'columns': [2, 1] } 
     }); 

     // Define a table. 
     var table = new google.visualization.ChartWrapper({ 
      'chartType': 'Table', 
      'containerId': 'chart2', 
      'options': { 
       'width': '300px' 
      } 
     }); 

     new google.visualization.Dashboard(document.getElementById('dashboard')).bind([countryPicker], [barChart, table]).draw(data); 
     } 

편집 :

감사합니다.

Answer 1

이 작업을 수행하려면 대시 보드에서 LineChart를 제거하고 테이블의 "준비 됨"이벤트를 사용하여 필터링 된 데이터를 가져오고 차트의 view.columns 매개 변수에 대한 적절한 설정을 만든 다음 필터링 된 차트를 그릴 것이 좋습니다. 데이터 :

google.visualization.events.addListener(table, 'ready', function() { 
    var filteredData = table.getDataTable(); 
    // get a list of all the labels in column 0 
    var group = filteredData.getDistinctValues(0); 

    // build the columns for the view 
    var columns = [0]; 
    for (var i = 0; i < group.length; i++) { 
     var label = group[i]; 
     // set the columns to use in the chart's view 
     // calculated columns put data belonging to each country in the proper column 
     columns.push({ 
      type: 'number', 
      label: label, 
      calc: (function (name) { 
       return function (dt, row) { 
        return (dt.getValue(row, 0) == name) ? dt.getValue(row, 1) : null; 
       } 
      })(label) 
     }); 
    } 
    var view = barChart.getView() || {}; 
    view.columns = columns; 
    barChart.setView(view); 
    barChart.setDataTable(filteredData); 
    barChart.draw(); 
}); 
new google.visualization.Dashboard(document.getElementById('dashboard')).bind([countryPicker], [table]).draw(data);