Javascript 谷歌图表x轴标签文本

这是我的图表示例：

---

是否可以为每个刻度定义自定义x轴标签文本，例如显示1.0为“foo”、1.5为空、2.0为“bar”等等。问题是，当我使用ChartRangeFilter时，我不能使用string类型的值。

您可以在

勾号
选项中使用对象表示法

提供值（
v:
）和格式化值（
f:
）

在此示例中，格式化的值添加到
数据表中


然后添加到
ticks
数组中


google.charts.load（'current'{
回调：函数（）{
（五：2，f:'01:00}，{v:3，f:'02:00}，{v:3，f:'02:00}，{v:3，f:'02:00：：：，{v:4，f：1，f：1，f:1，f：1，f：1，f：1，f：1，f：2，f：1，f：1，f：1，f：：：：：：：：：：'0:00:00，，，，，{v:3，f：1，f：1，f：1，f：1，f：1，f：1，f：1，f：1，f：1，f：1，f：1，f：1，f：1，f：1，f：1，f：1，f：1，f：1，f：1，f：1，f：1，f：1，f：1，f：1，f：1，f：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'，'data3 compare'，'data4 compare'，'data3 compare'，'data4 compare'，'，
[{v:0.85，f:'foo'}，165938522998，null，null，null，null，614.6500]，
[{v:1.15，f:'bar'}，null，null，null，null，165938522998614.6510]，
[{v:1.5，f:''}，0，0，0，0，0，0，0，null，null]，
[{v:1.85，f:'foo2'}，13511205991268，null，null，null，null，682530]，
[{v:2.15，f:'bar2'}，null，null，null，null，165938522998682540]，
[{v:2.5，f:''}，13511205991268，null，null，null，682530]，
[{v:2.85，f:'foo3'}，null，null，null，null，165938522998682540]
]);
var dash=new google.visualization.Dashboard（document.getElementById（'Dashboard'）；
var control=new google.visualization.ControlWrapper({
controlType:“ChartRangeFilter”，
集装箱船：“控制室”，
选项：{
filterColumnIndex:0，
用户界面：{
图表选项：{
身高：50，
宽度：600，
图表区：{
宽度：“80%”
},
标题：“图表”，
阀门：[
{标题：'foo'}，
{标题：'bar'}
],
哈克斯：{
蜱虫：[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]，
},
序列类型：“条”，
条：{groupWidth:1000}，
isStacked：是的，
图例：“无”，
是的，
系列：{
0: {
targetAxisIndex:0
},
4: {
targetAxisIndex:0
},
8: {
目标指数：1，
类型：“行”
},
9: {
目标指数：1，
类型：“行”
}
}
}
}
}
});
var chart=new google.visualization.ChartWrapper({
chartType:'ComboChart'，
集装箱船：“海图分区”，
选项：{
标题：“图表”，
宽度：600，
图表区：{
宽度：“80%”
},
阀门：[
{标题：'foo'}，
{标题：'bar'}
],
序列类型：“条”，
isStacked：是的，
图例：“无”，
是的，
系列：{
0: {
targetAxisIndex:0
},
4: {
targetAxisIndex:0
},
8: {
目标指数：1，
类型：“行”
},
9: {
目标指数：1，
类型：“行”
}
}
}
});
google.visualization.events.addListener（控件，'statechange'，函数（）{
google.visualization.events.addOneTimeListener（图表'ready'，setTicks）；
});
google.visualization.events.addOneTimeListener（图表'ready'，setTicks）；
函数setTicks（）{
var=[]；
对于（变量i=0；iif（（origTicks[i].v>=control.getState（）.range.start）和&（origTicks[i].v谢谢。确实如此！实际上有一个问题。我只想显示过滤后的记号，但当我在图表选项中明确指定记号时，它会显示所有记号。请参见示例：这不是原始帖子中的记号，但请参见编辑--您可以使用
图表上的
'ready'
事件，该事件在
'statechange'
之后触发>触发时，根据
范围更新
ticks
选项。start
和
range.end
如果我需要不在数据中的硬编码ticks的标签怎么办：var ticks=[{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}，{v:7，f:'06:00'}，{v:8，f:'07:00'}，{v:9，f:'08:0'}
    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);

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