Javascript 谷歌物化图表选项_Javascript_Charts_Google Visualization

Javascript 谷歌物化图表选项

javascript charts google-visualization

Javascript 谷歌物化图表选项,javascript,charts,google-visualization,Javascript,Charts,Google Visualization,我正在使用GoogleAPI编写一个带有单个图表的html页面。该图表为带3类过滤器的线型末端如果我设置了“图表”选项，则选项值不会在我的图表中使用： <html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript">

我正在使用GoogleAPI编写一个带有单个图表的html页面。该图表为带3类过滤器的线型末端

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

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

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

选项

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

google.chart.Line.convertOptions

接下来，材质的选项略有不同

'title'

是

'chart'

chart.title

并且需要使用

'legend'

选项的

'position'

属性--

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']）；
setOnLoadCallback（drawDashboard\u CP\u DIM\u选项卡）；
函数drawDashboard_CP_DIM_TAB（）{
var data=google.visualization.arrayToDataTable([
['Data'、'Istanza'、'Owner'、'Tabella'、'DimensioneTabella']
，[新日期（2012年6月1日至30日），'DBMW1'，'DB_审计'，'AUD$_历史'，16000000.9]
，[新日期（2012年9月1日），'DBMW1'，'DB_审计'，'AUD$_历史'，28000000.2]
]);
var chart=new google.visualization.ChartWrapper({
“图表类型”：“行”，
“containerId”：“图表容器”，
“dataTable”：数据，
“选项”：google.charts.Line.options({
“图表”：{
“标题”：“标题”，
},
“图例”：{
“位置”：“无”
},
“文本”：“标签”，
'vAxis'：{'gridlines'：{'color'：'green'}，'format'：'none'}
}),
“视图”：{“列”：[0，4]}
});
chart.draw（）；
}

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