Question

我有一堆产品，我使用ColumnChart在x轴上显示产品名称，然后在y轴上显示产品的两个不同值。由于有很多产品，如果我在ColumnChart上一次显示所有产品，它会变得非常混乱，因此我使用ChartRangeFilter控件来获得产品窗口。

现在我的问题是ChartRangeFilter不能在轴上使用字符串。但是我不想在x轴上显示产品ID，所以可以在显示时更改标签吗？希望你能明白我的意思。以下是一些要在google code playground

中测试的代码

<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  <title>
  Google Visualization API Sample
</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load('visualization', '1.1', {packages: ['corechart', 'controls']});
</script>
<script type="text/javascript">
  function drawVisualization() {
    var dashboard = new google.visualization.Dashboard(
         document.getElementById('dashboard'));

     var control = new google.visualization.ControlWrapper({
       'controlType': 'ChartRangeFilter',
       'containerId': 'control',
       'options': {
         // Filter by the date axis.
         'filterColumnIndex': 0,
         'ui': {
           'chartType': 'LineChart',
           'chartOptions': {
             'chartArea': {'width': '90%'},
             'hAxis': {'baselineColor': 'none'}
           },

           'chartView': {
             'columns': [0, 1, 2]
           },

           'minRangeSize': 1
         }
       },
       // Initial range: 1 to 4.
       'state': {'range': {'start': 1, 'end': 4}}
     });

     var chart = new google.visualization.ChartWrapper({
       'chartType': 'ColumnChart',
       'containerId': 'chart',
       'options': {
         // Use the same chart area width as the control for axis alignment.
         'chartArea': {'height': '80%', 'width': '90%'},
         'hAxis': {'slantedText': false},
         'vAxis': {'viewWindow': {'min': 0, 'max': 20}},
         'legend': {'position': 'none'}
       }
     });

     var data = new google.visualization.DataTable();
     data.addColumn('number', 'Product ID');
     data.addColumn('number', 'value1');
     data.addColumn('number', 'valu2');
     data.addRow([1, 11, 12]);
     data.addRow([2, 15, 12]);
     data.addRow([3, 10, 11]);
     data.addRow([4, 11, 9]);
     data.addRow([5, 8, 12]);
     data.addRow([6, 4, 9]);
     data.addRow([7, 8, 15]);
     data.addRow([8, 8, 11]);
     data.addRow([9, 8, 9]);


     dashboard.bind(control, chart);
     dashboard.draw(data);
  }


  google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body>
 <div id="dashboard">
    <div id="chart" style='width: 915px; height: 300px;'></div>
    <div id="control" style='width: 915px; height: 50px;'></div>
 </div>
</body>
</html>

提前致谢！

Answer 1

您可以使用DataView来解决此问题。在ControlWrapper中，像这样设置view.columns参数：

var control = new google.visualization.ControlWrapper({
    'controlType': 'ChartRangeFilter',
    'containerId': 'control',
    'options': {
        // Filter by the date axis.
        'filterColumnIndex': 0,
        'ui': {
            'chartType': 'LineChart',
            'chartOptions': {
                'chartArea': {'width': '90%'},
                'hAxis': {'baselineColor': 'none'}
            },
            'chartView': {
                'columns': [0, 1, 2]
            },
            'minRangeSize': 1
        }
    },
    // Initial range: 1 to 4.
    'state': {'range': {'start': 1, 'end': 4}},
    view: {
        columns: [{
            type: 'number',
            calc: function (dt, row) {
                return {v: row, f: dt.getFormattedValue(row, 0)};
            }
        }, 1, 2]
    }
});

然后在ChartWrapper的view.columns中反转该过程：

var chart = new google.visualization.ChartWrapper({
    'chartType': 'ColumnChart',
    'containerId': 'chart',
    'options': {
        // Use the same chart area width as the control for axis alignment.
        'chartArea': {'height': '80%', 'width': '90%'},
        'hAxis': {'slantedText': false},
        'vAxis': {'viewWindow': {'min': 0, 'max': 20}},
        'legend': {'position': 'none'}
    },
    view: {
        columns: [{
            type: 'string',
            label: data.getColumnLabel(0),
            calc: function (dt, row) {
                return dt.getFormattedValue(row, 0);
            }
        }, 1, 2]
    }
});

那应该能得到你想要的东西。

此代码假定您有一个包含3列的DataTable：字符串（产品名称）和两个数字列（value1和value2）。这是一个演示：http://jsfiddle.net/asgallant/55agF/

Answer 2

更改背景文本的颜色

hAxis: {textStyle: {color: 'white'}},

谷歌可视化在x轴上的所有值上更改标签

2 个答案: