Google Visualization - Dashboard w/Combo Chart (Bubble & Line)

Question

Я создаю приборную панель с пузырьковой диаграммой, которая сравнивает результаты тестов с этого года до прошлого года. Ось X представляет собой средний балл в процентах в 2012 году (от 0 до 100), а ось Y - средний балл в 2013 году (также от 0 до 100). Я пытаюсь показать изменения в работе с этим сюжетом, поэтому школа, ученики которой на 50-м процентиле на экзамене 2012 года и на 60-м процентиле в тесте 2013 года, будет представлять рост. Аналогичным образом, школа, ученики которой в среднем в 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 см обновление ниже обходным]

Вы можете добавить 3-й ряд данных с двумя точками данных (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 на «прозрачный», и использует позиционирование CSS к слою линии под BubbleChart:

[JavaScript]

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/