如何在工具提示中不显示x轴值

时间:2014-04-19 01:39:50

标签: google-visualization

我想不使用google visualization api在折线图的工具提示中显示x轴值。有谁知道这是怎么做到的吗?我想在下面的代码中的系列1和2有一个工具提示,只显示垂直轴值(测试)

var data = new google.visualization.DataTable();
        data.addColumn('date', 'Date Logged');
        data.addColumn('number', 'Test');
        data.addColumn('string', 'State');
         data.addColumn('number', null);
          data.addColumn('number', null);



        for (var i = 0; i < dataValues.length; i++) {
            data.addRow(//getting this from db);
        }

     var monthformatter = new google.visualization.DateFormat({pattern: "MMM d, y"});
    monthformatter.format(data, 0);

      // Define a category picker control 
   var categoryPicker2 = new google.visualization.ControlWrapper({
      'controlType': 'CategoryFilter',
      'containerId': 'control2',
      'options': {
        'filterColumnLabel': 'State',
        'ui': {
        'labelStacking': 'vertical',
          'allowTyping': false,
          'allowMultiple': false,
          'caption' : 'All'

        }
      }
    });

    chart = new google.visualization.ChartWrapper({
      'chartType': 'ScatterChart',
      'containerId': 'chart1',
      'options': {
        'title': 'Test',
          'width': 500,
          'height': 500,
          'legend': 'none',
          'pointSize': 5,
          'vAxis': { 'title': 'Test', 'titleTextStyle': { 'color': 'red'}},
          'hAxis': { 'format': 'MMM d, y', 'title': 'Date', 'titleTextStyle': { 'color': 'red'} },
         'interpolateNulls': true,
        'pieSliceText': 'label',
        'series': {
          '0': { 'color': 'blue' },
          '1': { 'color': 'red', 'lineWidth': 3, 'pointSize': 0, 'visibleInLegend': 'false' },
          '2': { 'color': 'red', 'lineWidth': 3, 'pointSize': 0, 'visibleInLegend': 'false'},
        }
      },


      'view': {'columns': [0, 1, 3, 4]}
    });



     // Create a dashboard
    new google.visualization.Dashboard(document.getElementById('dashboard')).
        bind([categoryPicker2], [chart]).
        // Draw the entire dashboard.
        draw(data);

1 个答案:

答案 0 :(得分:1)

您可以将这些列的格式化值设置为&#34;测试&#34;中的值,也可以将自定义工具提示列添加到视图中。

将第3列和第4列的格式化值设置为第1列的值

view: {
    columns: [0, 1, {
        sourceColumn: 3,
        calc: function (dt, row) {
            return {v: dt.getValue(row, 3), f: dt.getFormattedValue(row, 1)};
        }
    }, {
        sourceColumn: 4,
        calc: function (dt, row) {
            return {v: dt.getValue(row, 4), f: dt.getFormattedValue(row, 1)};
        }
    }]
}

创建自定义工具提示列:

view: {
    columns: [0, 1, 3, {
        type: 'string',
        role: 'tooltip',
        calc: function (dt, row) {
            // return to whatever text you want in the tooltip
            return dt.getFormattedValue(row, 1);
        }
    }, 4, {
        type: 'string',
        role: 'tooltip',
        calc: function (dt, row) {
            // return to whatever text you want in the tooltip
            return dt.getFormattedValue(row, 1);
        }
    }]
}