Google 시각화 - 대시 보드 (버블 및 라인)

Question

올해의 테스트 점수를 지난 해와 비교하는 버블 차트가있는 대시 보드를 만들었습니다. x 축은 평균 2012 백분위 수 (0에서 100까지)이고 y 축은 평균 백분위 수 (0에서 100까지)입니다. 나는이 음모로 공연의 변화를 보여주기 위해 노력하고 있습니다. 따라서 2012 년 시험에서 50 번째 백분위 수표를, 2013 번째 시험에서 60 번째 백분위 수표를 기록한 학교는 성장을 나타냅니다. 비슷하게, 작년에 50 번째 백분위 수를 기록했지만 올해 42 번째 백분위 수를 기록한 학교는 (기준 그룹에 비해) 감소 할 것입니다. 버블의 크기는 학생들의 수에 비례합니다. y = x 줄은 2013 년 백분위 점수가 2012 년 점수와 일치하는 학교를 나타내며 작년과 동일한 실적을 나타냅니다. 시각적으로 볼 때,이 선 위에 중심이있는 거품은 성장을 나타내며, 선 아래의 거품은 쇠퇴를 나타내며 선의 거품은 정체를 나타냅니다.

내 사용자가 y = x 행을 볼 때 훨씬 쉽습니다 ([0,0]에서 (100,100)까지의 행]). 이렇게하면 선의 위, 위 또는 아래에있는 거품을 쉽게 볼 수 있습니다. 라인이 없다면 포인트를 알지 못하면 성장/감소를보기가 어렵습니다.

버블 차트에 y = x 줄을 겹쳐 쓸 수 있습니까? 그렇다면 어떻게? ComboChart를 시도했지만 성공하지 못했습니다. 감사.

이 내가 콤보 차트를 그리기 위해 노력하고 있어요 방법입니다

var table = new google.visualization.ChartWrapper({ 
     chartType: 'ComboChart', 
     containerId: 'table_div', 
     options: { 
      height: 800, 
      width: 800, 
      bubble: {opacity: 0.2, stroke: 'transparent'}, 
      hAxis: {minValue: 0, maxValue: 100}, 
      vAxis: {minValue: 0, maxValue: 100}, 
      colors: ['blue','red','green'], 
      seriesType: 'bubble', 
      series: {2: {type: 'line', pointSize: 0, lineWidth: 1, enableInteractivity: false, visibleInLegend: false}}, 
      animation: {duration:1500, easing:'out'}, 
      sizeAxis: {minSize: 2, minValue: 5, maxSize: 30} 
     } 
    }); 

Answer 1

[편집 : 대답은 해결 방법은 아래 업데이트를 참조 BubbleCharts 적용되지 않습니다] 당신은 추가 할 수

두 데이터 포인트 (0, 0) 및 (100, 100)을 갖는 세 번째 데이터 시리즈. 그렇다면이 같은이 시리즈의 series.<series index> 옵션을 설정

series: { 
    2: { 
     // options for the 3rd series 
     pointSize: 0, // makes the points in this series invisible 
     lineWidth: 1, // connects the points in this series with a line 
     enableInteractivity: false, // disables mouse effects (like spawning tooltips) for this series 
     visibleInLegend: false // hides this series from the legend 
    } 
} 

[편집 : 여기 BubbleCharts에 대한 주위에 작업입니다] BubbleCharts 다른 차트 유형과 호환되지 않으며, 혼합 할 수 없기 때문에

COmboChart를 사용하면 이렇게 선이 필요할 경우 해결 방법을 찾아야합니다. 다음은 단지 라인과 제 차트를 그리는 예제의 것 "투명"는 BubbleChart의 배경을 설정하고 BubbleChart 아래 라인 층 CSS 위치를 사용

[스크립트]

var table = new google.visualization.ChartWrapper({ 
    chartType: 'BubbleChart', 
    containerId: 'table_div', 
    options: { 
     height: 800, 
     width: 800, 
     backgroundColor: 'transparent', 
     bubble: {opacity: 0.2, stroke: 'transparent'}, 
     hAxis: {minValue: 0, maxValue: 100}, 
     vAxis: {minValue: 0, maxValue: 100}, 
     colors: ['blue','red','green'], 
     animation: {duration:1500, easing:'out'}, 
     sizeAxis: {minSize: 2, minValue: 5, maxSize: 30} 
    } 
}); 

var hackChart = new google.visualization.ChartWrapper({ 
    chartType: 'LineChart', 
    containerId: 'hack_chart_div', 
    dataTable: [['x', 'y'],[0, 0], [100, 100]], 
    options: { 
     height: 800, 
     width: 800, 
     hAxis: { 
      minValue: 0, 
      maxValue: 100, 
      textPosition: 'none', 
      gridlines: { 
       count: 0 
      }, 
      baselineColor: 'none' 
     }, 
     vAxis: { 
      minValue: 0, 
      maxValue: 100, 
      textPosition: 'none', 
      gridlines: { 
       count: 0 
      }, 
      baselineColor: 'none' 
     }, 
     colors: ['blue'], 
     pointSize: 0, 
     lineWidth: 1, 
     enableInteractivity: false, 
     legend: { 
      position: 'none' 
     } 
    } 
}); 
hackChart.draw(); 

을 [HTML]

<div id="chart_container"> 
    <div id="table_div"></div> 
    <div id="hack_chart_div"></div> 
</div> 

[CSS]

#chart_container { 
    position: relative; 
} 
#table_div { 
    z-index: 1; 
} 
#hack_chart_div { 
    position: absolute; 
    top: 0px; 
    z-index: 0; 
} 

여기에 작업을 참조하십시오 : http://jsfiddle.net/asgallant/t5rkJ/