Question

我正在使用google api编写带有单个图表的html页面。该图表是LINE类型的结尾，有3个CategoryFilter。

如果我设置了图表选项，则我的图表中不会使用选项值：

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
        google.charts.load('current', {'packages':['bar','corechart', 'controls','table', 'gauge']});
        google.charts.setOnLoadCallback(drawDashboard_CP_DIM_TAB);

        function drawDashboard_CP_DIM_TAB() {
            var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div_CP_DIM_TAB'));

            var slider = new google.visualization.ControlWrapper({
                ...
            });

            var categoryPicker1 = new google.visualization.ControlWrapper({
              ...
            });

            var categoryPicker2 = new google.visualization.ControlWrapper({
                ...
            });

            var categoryPicker3 = new google.visualization.ControlWrapper({
                    ...
            });

            var chart = new google.visualization.ChartWrapper({
              'chartType': 'Line',
              'containerId': 'chart_div_CP_DIM_TAB',
              'options': {
                'title':'Title',
                'legend': 'none',
                'pieSliceText': 'label',
                'vAxis': {'gridlines':{'color': 'green'}, 'format' : 'none'}
              },
              'view': {'columns': [0, 4]}
            });

            var data = google.visualization.arrayToDataTable([
              ['Data','Istanza' ,'Owner', 'Tabella', 'DimensioneTabella']
                ,[new Date(2012,06-1,30),'DBMW1','DB_AUDIT','AUD$_HISTORY',16000000.9]
                ...
                ,[new Date(2012,09-1,01),'DBMW1','DB_AUDIT','AUD$_HISTORY',28000000.2]
            ]);

            dashboard.bind(slider, categoryPicker1).bind(categoryPicker1, categoryPicker2).bind(categoryPicker2, categoryPicker3).bind(categoryPicker3, [chart]);

            dashboard.draw(data);
        }


    </script>



    <div id="dashboard_div_CP_DIM_TAB">
        <h2>Tabelle con dimensione > 10MB</h2>  
        <div id="catPicker_CP_DIM_TAB1"></div>
        <div id="catPicker_CP_DIM_TAB2"></div>
        <div id="catPicker_CP_DIM_TAB3"></div>
        <div id="slider_CP_DIM_TAB"></div>
        <div id="chart_div_CP_DIM_TAB" width="100%"></div>      
    </div>


</body>
</html>

特别是问题在于这一行

              'options': {
                'title':'Title',
                'legend': 'none',
                'pieSliceText': 'label',
                'vAxis': {'gridlines':{'color': 'green'}, 'format' : 'none'}
              },

Answer 1

首先，在使用材料图表时，options需要转换

每个材料包都有一个转换器......

google.chart.Line.convertOptions

next ，材料的选项略有不同

'title'是'chart'选项的属性 - chart.title

并且需要使用'position'选项的'legend'属性 - legend.position

e.g。

'options': google.charts.Line.convertOptions({
  'chart': {
    'title':'Title',
  },
  'legend': {
    'position':'none'
  },
  'pieSliceText': 'label',
  'vAxis': {'gridlines':{'color': 'green'}, 'format' : 'none'}
}),

请参阅以下工作代码段...

google.charts.load('current', {'packages':['bar','corechart', 'controls','table', 'gauge', 'line']});
google.charts.setOnLoadCallback(drawDashboard_CP_DIM_TAB);

function drawDashboard_CP_DIM_TAB() {
  var data = google.visualization.arrayToDataTable([
    ['Data','Istanza' ,'Owner', 'Tabella', 'DimensioneTabella']
      ,[new Date(2012,06-1,30),'DBMW1','DB_AUDIT','AUD$_HISTORY',16000000.9]
      ,[new Date(2012,09-1,01),'DBMW1','DB_AUDIT','AUD$_HISTORY',28000000.2]
  ]);
  var chart = new google.visualization.ChartWrapper({
    'chartType': 'Line',
    'containerId': 'chart-container',
    'dataTable': data,
    'options': google.charts.Line.convertOptions({
      'chart': {
        'title':'Title',
      },
      'legend': {
        'position':'none'
      },
      'pieSliceText': 'label',
      'vAxis': {'gridlines':{'color': 'green'}, 'format' : 'none'}
    }),
    'view': {'columns': [0, 4]}
  });
  chart.draw();
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart-container"></div>

谷歌物化图表的选项

1 个答案: