javascript - 谷歌图表 x 轴标签文本

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);

是否可以为每个刻度定义自定义 x 轴标签文本，例如将 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>