Google Column Chart с несколькими фоновыми зонами

Question

В FusionCharts есть одна функция, которая мешает мне перейти на API графиков Google; trend zones (см. Второй пример). Используя их, я могу установить горизонтальные цвета фона - тенденции - за моими столбцами.

Это мощная визуализация в моем случае использования, где я обмениваюсь значениями.

Я просеял документацию и просто не могу найти то, что мне нужно. Кто-нибудь взломал что-то вместе, что может сделать трюк?

Спасибо за любую помощь, которую вы можете дать!

Answer 1

Я написал хак, который делает в значительной степени именно то, что вы ищете:

function drawChart() { 
    var data = new google.visualization.DataTable(); 
    data.addColumn('number', 'x'); 
    data.addColumn('number', 'y'); 
    data.addColumn('number', 'color band 1'); 
    data.addColumn('number', 'color band 2'); 
    data.addColumn('number', 'color band 3'); 
    data.addColumn('number', 'color band 4'); 
    data.addColumn('number', 'color band 5'); 

    var y = 50; 
    // fill with 100 rows of random data 
    for (var i = 0; i < 100; i++) { 
     y += Math.ceil(Math.random() * 5) * Math.pow(-1, Math.ceil(Math.random() * 2)); 
     if (y < 0) { 
      y = 10; 
     } 
     if (y > 100) { 
      y = 90; 
     } 
     // make the colored bands appear every 20 
     data.addRow([i, y, 20, 20, 20, 20, 20]); 
    } 

    var chart = new google.visualization.ComboChart(document.getElementById('chart_div')); 

    chart.draw(data, { 
     height: 400, 
     width: 600, 
     isStacked: true, 
     vAxis: { 
      minValue: 0, 
      maxValue: 100 
     }, 
     series: { 
      0: { 
       type: 'line' 
      }, 
      1: { 
       lineWidth: 0, 
       type: 'area', 
       visibleInLegend: false, 
       enableInteractivity: false 
      }, 
      2: { 
       lineWidth: 0, 
       type: 'area', 
       visibleInLegend: false, 
       enableInteractivity: false 
      }, 
      3: { 
       lineWidth: 0, 
       type: 'area', 
       visibleInLegend: false, 
       enableInteractivity: false 
      }, 
      4: { 
       lineWidth: 0, 
       type: 'area', 
       visibleInLegend: false, 
       enableInteractivity: false 
      }, 
      5: { 
       lineWidth: 0, 
       type: 'area', 
       visibleInLegend: false, 
       enableInteractivity: false 
      }, 
      6: { 
       lineWidth: 0, 
       type: 'area', 
       visibleInLegend: false, 
       enableInteractivity: false 
      } 
     } 
    }); 
} 

google.load('visualization', '1', {packages: ['corechart'], callback: drawChart}); 

Посмотреть это работает здесь: http://jsfiddle.net/asgallant/apH2B/