Google диаграмма текст метки оси х

Question

Это мой график Пример:

JSFiddle

google.charts.load('visualization', '1', {packages: ['controls', 'charteditor']}); 
google.charts.setOnLoadCallback(drawChart); 

function drawChart() { 
     var data = google.visualization.arrayToDataTable([ 
     ['Day', 'data1', 'data2', 'data3', 'data4', 'data1 compare', 'data2 compare', 'data3 compare', 'data4 compare', '', ''], 
     [0.85, 165, 938, 522, 998, null, null, null, null, 614.6, 500], 
     [1.15, null, null, null, null, 165, 938, 522, 998, 614.6, 510], 
     [1.5, 0, 0, 0, 0, 0, 0, 0, 0, null, null ],  
     [1.85, 135, 1120, 599, 1268, null, null, null, null, 682, 530], 
     [2.15, null, null, null, null, 165, 938, 522, 998, 682, 540], 
     [2.5, 135, 1120, 599, 1268, null, null, null, null, 682, 530], 
     [2.85, null, null, null, null, 165, 938, 522, 998, 682, 540] 
     ]); 

    var dash = new google.visualization.Dashboard(document.getElementById('dashboard')); 

    var control = new google.visualization.ControlWrapper({ 
     controlType: 'ChartRangeFilter', 
     containerId: 'control_div', 
     options: { 
      filterColumnIndex: 0, 
      ui: { 
       chartOptions: { 
        height: 50, 
        width: 600, 
        chartArea: { 
         width: '80%' 
        }, 
        title : 'Chart', 
        vAxes: [ 
         {title: 'foo'}, 
         {title: 'bar'} 
        ], 
        hAxis: { 
         ticks: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31], 
        }, 
        seriesType: 'bars', 
        bar: { groupWidth: 1000 }, 
        isStacked: true, 
        legend: 'none', 
        interpolateNulls: true, 
        series: { 
          0: { 
           targetAxisIndex: 0 
          }, 
          4: { 
           targetAxisIndex: 0 
          }, 
          8: { 
           targetAxisIndex: 1, 
           type: 'line' 
          }, 
          9: { 
           targetAxisIndex: 1, 
           type: 'line' 
          } 
         } 
       } 
      } 
     } 
    }); 

    var chart = new google.visualization.ChartWrapper({ 
     chartType: 'ComboChart', 
     containerId: 'chart_div', 
     options: { 
         title : 'Chart', 
        width: 600, 
        chartArea: { 
         width: '80%' 
        }, 
        vAxes: [ 
         {title: 'foo'}, 
         {title: 'bar'} 
        ], 
        seriesType: 'bars', 
        isStacked: true, 
        legend: 'none', 
        interpolateNulls: true, 
        series: { 
          0: { 
           targetAxisIndex: 0 
          }, 
          4: { 
           targetAxisIndex: 0 
          }, 
          8: { 
           targetAxisIndex: 1, 
           type: 'line' 
          }, 
          9: { 
           targetAxisIndex: 1, 
           type: 'line' 
          } 
         } 
     } 
    }); 

    function setOptions (wrapper) { 
     // sets the options on the chart wrapper so that it draws correctly 
     wrapper.setOption('height', 400); 
     wrapper.setOption('width', 600); 
     wrapper.setOption('chartArea.width', '80%'); 
     // the chart editor automatically enables animations, which doesn't look right with the ChartRangeFilter 
     wrapper.setOption('animation.duration', 0); 
    } 

    setOptions(chart); 

    dash.bind([control], [chart]); 

    dash.draw(data); 

Есть ли возможность определить пользовательские х текст метки оси для каждого клеща, например, дисплей 1.0, как «Foo» , 1.5 - пустой, 2.0 - 'bar' и т. Д. Дело в том, что я не могу использовать значения строки типа, когда я использую ChartRangeFilter.

Answer 1

вы можете использовать объект нотации в вашем ticks опции
обеспечивают значение (v:) и форматированный значение (f:)

ticks.push({ 
    v: 1.0, 
    f: 'foo' 
}); 

в этом примере, отформатированные значения добавляются в DataTable
затем добавляется к массиву ticks

google.charts.load('current', { 
 
    callback: function() { 
 

 
    var origTicks = [{v: 1, f: '00:00'}, {v: 2, f: '01:00'}, {v: 3, f: '02:00'}, {v: 4, f: '03:00'}, {v: 5, f: '04:00'}, {v: 6, f: '05:00'}, {v: 7, f: '06:00'}, {v: 8, f: '07:00'}, {v: 9, f: '08:00'}, {v: 10, f: '09:00'}, {v: 11, f: '10:00'}, {v: 12, f: '11:00'}, {v: 13, f: '12:00'}, {v: 14, f: '13:00'}, {v: 15, f: '14:00'}, {v: 16, f: '15:00'}, {v: 17, f: '16:00'}, {v: 18, f: '17:00'}, {v: 19, f: '18:00'}, {v: 20, f: '19:00'}, {v: 21, f: '20:00'}, {v: 22, f: '21:00'}, {v: 23, f: '22:00'}, {v: 24, f: '23:00'}]; 
 

 
    var data = google.visualization.arrayToDataTable([ 
 
     ['Day', 'data1', 'data2', 'data3', 'data4', 'data1 compare', 'data2 compare', 'data3 compare', 'data4 compare', '', ''], 
 
     [{v: 0.85, f: 'foo'}, 165, 938, 522, 998, null, null, null, null, 614.6, 500], 
 
     [{v: 1.15, f: 'bar'}, null, null, null, null, 165, 938, 522, 998, 614.6, 510], 
 
     [{v: 1.5, f: ''}, 0, 0, 0, 0, 0, 0, 0, 0, null, null ], 
 
     [{v: 1.85, f: 'foo2'}, 135, 1120, 599, 1268, null, null, null, null, 682, 530], 
 
     [{v: 2.15, f: 'bar2'}, null, null, null, null, 165, 938, 522, 998, 682, 540], 
 
     [{v: 2.5, f: ''}, 135, 1120, 599, 1268, null, null, null, null, 682, 530], 
 
     [{v: 2.85, f: 'foo3'}, null, null, null, null, 165, 938, 522, 998, 682, 540] 
 
    ]); 
 

 
    var dash = new google.visualization.Dashboard(document.getElementById('dashboard')); 
 

 
    var control = new google.visualization.ControlWrapper({ 
 
     controlType: 'ChartRangeFilter', 
 
     containerId: 'control_div', 
 
     options: { 
 
      filterColumnIndex: 0, 
 
      ui: { 
 
       chartOptions: { 
 
        height: 50, 
 
        width: 600, 
 
        chartArea: { 
 
         width: '80%' 
 
        }, 
 
        title : 'Chart', 
 
        vAxes: [ 
 
         {title: 'foo'}, 
 
         {title: 'bar'} 
 
        ], 
 
        hAxis: { 
 
         ticks: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31], 
 
        }, 
 
        seriesType: 'bars', 
 
        bar: { groupWidth: 1000 }, 
 
        isStacked: true, 
 
        legend: 'none', 
 
        interpolateNulls: true, 
 
        series: { 
 
          0: { 
 
           targetAxisIndex: 0 
 
          }, 
 
          4: { 
 
           targetAxisIndex: 0 
 
          }, 
 
          8: { 
 
           targetAxisIndex: 1, 
 
           type: 'line' 
 
          }, 
 
          9: { 
 
           targetAxisIndex: 1, 
 
           type: 'line' 
 
          } 
 
         } 
 
       } 
 
      } 
 
     } 
 
    }); 
 

 
    var chart = new google.visualization.ChartWrapper({ 
 
     chartType: 'ComboChart', 
 
     containerId: 'chart_div', 
 
     options: { 
 
         title : 'Chart', 
 
        width: 600, 
 
        chartArea: { 
 
         width: '80%' 
 
        }, 
 
        vAxes: [ 
 
         {title: 'foo'}, 
 
         {title: 'bar'} 
 
        ], 
 
        seriesType: 'bars', 
 
        isStacked: true, 
 
        legend: 'none', 
 
        interpolateNulls: true, 
 
        series: { 
 
          0: { 
 
           targetAxisIndex: 0 
 
          }, 
 
          4: { 
 
           targetAxisIndex: 0 
 
          }, 
 
          8: { 
 
           targetAxisIndex: 1, 
 
           type: 'line' 
 
          }, 
 
          9: { 
 
           targetAxisIndex: 1, 
 
           type: 'line' 
 
          } 
 
         } 
 
     } 
 
    }); 
 

 
    google.visualization.events.addListener(control, 'statechange', function() { 
 
     google.visualization.events.addOneTimeListener(chart, 'ready', setTicks); 
 
    }); 
 
    google.visualization.events.addOneTimeListener(chart, 'ready', setTicks); 
 

 
    function setTicks() { 
 
     var ticks = []; 
 
     for (var i = 0; i < origTicks.length; i++) { 
 
     if ((origTicks[i].v >= control.getState().range.start) && (origTicks[i].v <= control.getState().range.end)) { 
 
      ticks.push(origTicks[i]); 
 
     } 
 
     } 
 
     chart.setOption('hAxis.ticks', ticks); 
 
     chart.draw(); 
 
    } 
 

 

 
    function setOptions (wrapper) { 
 
     // sets the options on the chart wrapper so that it draws correctly 
 
     wrapper.setOption('height', 400); 
 
     wrapper.setOption('width', 600); 
 
     wrapper.setOption('chartArea.width', '80%'); 
 
     // the chart editor automatically enables animations, which doesn't look right with the ChartRangeFilter 
 
     wrapper.setOption('animation.duration', 0); 
 
    } 
 

 
    setOptions(chart); 
 

 
    dash.bind([control], [chart]); 
 

 
    dash.draw(data); 
 

 

 
    }, 
 
    packages:['controls', 'corechart'] 
 
});

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div> 
 
<div id="control_div"></div>