谷歌可視化更改x軸上所有值的標籤

我有一堆產品，我使用ColumnChart在x軸上顯示產品名稱，然後顯示產品在y軸上的兩個不同值。由於存在一堆產品，如果我在ColumnChart上一次顯示所有產品，就會顯得雜亂無章，因此我使用ChartRangeFilter控件來獲得產品窗口。谷歌可視化更改x軸上所有值的標籤

現在我的問題是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>

在此先感謝！

來源

2013-08-02 user1478200

您可以使用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列的數據表：一個字符串（產品名稱）和兩個數字列（值1和值2）。這裏是一個演示：http://jsfiddle.net/asgallant/55agF/

來源

2013-08-02 21:38:52 asgallant

謝謝您的回答，但我不熟悉谷歌的可視化，不明白該怎麼做。我在ControlWrapper中的選項中添加了代碼，它仍然顯示相同的內容，但是當我在ChartWrapper中添加其他部分時，頁面變得完全變白。我沒有在我的數據表中添加任何東西。我應該不添加產品名稱嗎？ – user1478200

我會重新格式化答案，以便更具體。 – asgallant

千「非常感謝」！沒有你的幫助，我無法解決它！ – user1478200

改變文本的顏色作爲背景的

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

來源

2016-04-22 10:22:22 user6240142

谷歌可視化更改x軸上所有值的標籤

回答

相關問題