Google 차트 API 세트 선택 강조 표시 할 시리즈 선택

Question

Google Charts API [https://developers.google.com/chart/interactive/docs/events]를 사용하여 올바른 형식의 ComboChart 및 올바른 형식의 Google 렌더링 데이터 테이블이 있습니다. .

나는 setSelection() 함수를 사용할 수있다. 그러나 선택은 가로 막 대형 차트의 중간을 통과하는 내 평균선을 강조 표시한다.

차트/그래프 영역에서 강조 표시된 '도트'를 다른 시리즈/데이터 세트에 표시하는 방법을 알아낼 수 없습니다 (예 : 평균선 대신 막대를 강조 표시 - 평균값은 중간을 통과하는 직선은 내 최종 사용자에게는 아무 의미도 없음).

원한다면 JS 바이올린에 코드를 추가 할 수 있지만 내 기본 데이터 세트 및 평균 라인이 내 기본 '1'(기수 0) 인 여러 개의 다른 막대를 표시하는 기본적인 Google 콤보 차트입니다.

편집 : http://jsfiddle.net/GSryX/

[code] 
some code 
[/code] 

어떤 아이디어 : JS 바이올린을 추가?

Answer 1

선택을 설정하는 경우 선택한 개체의 "열"매개 변수가 DataTable의 올바른 열을 참조하는지 확인하십시오.

편집 : 바 선택 효과를 보여 너무 작은 경우

, 당신은 대신에 선택에 바 색상을 변경하려면이 http://jsfiddle.net/asgallant/5SX8w/ 같은 해킹을 사용할 수 있습니다. 이것은 일련의 데이터 만 가지고있을 때 가장 효과적입니다. 시리즈가 두 개 이상인 경우 수정이 필요하며 누적 막대를 사용하지 않으면 제대로 표시되지 않을 수 있습니다.

function drawChart() { 
    var data = new google.visualization.DataTable(); 
    data.addColumn('string', 'Name'); 
    data.addColumn('number', 'Value'); 
    data.addRows([ 
     ['Foo', 94], 
     ['Bar', 23], 
     ['Baz', 80], 
     ['Bat', 47], 
     ['Cad', 32], 
     ['Qud', 54] 
    ]); 

    var chart = new google.visualization.ChartWrapper({ 
     chartType: 'ColumnChart', 
     containerId: 'chart_div', 
     dataTable: data, 
     options: { 
      // setting the "isStacked" option to true fixes the spacing problem 
      isStacked: true, 
      height: 300, 
      width: 600, 
      series: { 
       1: { 
        // set the color to change to 
        color: '00A0D0', 
        // don't show this in the legend 
        visibleInLegend: false 
       } 
      } 
     } 
    }); 

    google.visualization.events.addListener(chart, 'select', function() { 
     var selection = chart.getChart().getSelection(); 
     if (selection.length > 0) { 
      var newSelection = []; 
      // if row is undefined, we selected the entire series 
      // otherwise, just a single element 
      if (typeof(selection[0].row) == 'undefined') { 
       newSelection.push({ 
        column: 2 
       }); 
       chart.setView({ 
        columns: [0, { 
         type: 'number', 
         label: data.getColumnLabel(1), 
         calc: function() { 
          // this series is just a placeholder 
          return 0; 
         } 
        }, 1] 
       }); 
      } 
      else { 
       var rows = []; 
       for (var i = 0; i < selection.length; i++) { 
        rows.push(selection[i].row); 
        // move the selected elements to column 2 
        newSelection.push({ 
         row: selection[i].row, 
         column: 2 
        }); 
       } 

       // set the view to remove the selected elements from the first series and add them to the second series 
       chart.setView({ 
        columns: [0, { 
         type: 'number', 
         label: data.getColumnLabel(1), 
         calc: function (dt, row) { 
          return (rows.indexOf(row) >= 0) ? null : {v: dt.getValue(row, 1), f: dt.getFormattedValue(row, 1)}; 
         } 
        }, { 
         type: 'number', 
         label: data.getColumnLabel(1), 
         calc: function (dt, row) { 
          return (rows.indexOf(row) >= 0) ? {v: dt.getValue(row, 1), f: dt.getFormattedValue(row, 1)} : null; 
         } 
        }] 
       }); 
      } 
      // re-set the selection when the chart is done drawing 
      var runOnce = google.visualization.events.addListener(chart, 'ready', function() { 
       google.visualization.events.removeListener(runOnce); 
       chart.getChart().setSelection(newSelection); 
      }); 
     } 
     else { 
      // if nothing is selected, clear the view to draw the base chart 
      chart.setView(); 
     } 
     chart.draw(); 
    }); 

    chart.draw(); 
}