0

ColumnChart を使用して x 軸に製品名を表示し、y 軸に製品の 2 つの異なる値を表示する一連の製品があります。多数の製品があるため、ColumnChart にそれらすべてを一度に表示するとかなり面倒になるため、ChartRangeFilter コントロールを使用して製品のウィンドウを表示できるようにします。

今私の問題は、ChartRangeFilter が軸に文字列を使用できないことです。ただ、x軸にプロダクトIDを表示したくないので、表示する際のラベルを変更することは可能でしょうか？私の言いたいことを理解していただければ幸いです。以下は、 Google コード プレイグラウンドでテストするコードです。

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

前もって感謝します！

4

2 に答える 2

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

それはあなたが望むものを手に入れるはずです。

このコードは、文字列 (製品名) と 2 つの数値列 (値 1 と値 2) の 3 つの列を持つ DataTable があることを前提としています。ここにデモがあります：http://jsfiddle.net/asgallant/55agF/

于 2013-08-02T21:38:52.627 に答える
0

背景のテキストの色を変更する

hAxis: {textStyle: {color: 'white'}},
于 2016-04-22T10:22:22.933 に答える