Warning: file_get_contents(/data/phpspider/zhask/data//catemap/5/url/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Google visualization 在谷歌可视化中为标签排一行_Google Visualization - Fatal编程技术网

Google visualization 在谷歌可视化中为标签排一行

Google visualization 在谷歌可视化中为标签排一行,google-visualization,Google Visualization,我有一个谷歌图表时间表,显示了项目各个部分的开始时间,以及我们能够衡量项目效果的滞后时间。目前我的标签很小,因为谷歌坚持把标签放在左边、右边或盒子里。如果标签在方框下方的空白行中,我可以使我的图表更加清晰。在我开始添加空行然后在paint中编辑它之前,是否有一种合理的方法来移动标签显示的位置并添加空行 例如: <html> <head> <script type="text/javascript" src="https://www.gstatic

我有一个谷歌图表时间表,显示了项目各个部分的开始时间,以及我们能够衡量项目效果的滞后时间。目前我的标签很小,因为谷歌坚持把标签放在左边、右边或盒子里。如果标签在方框下方的空白行中,我可以使我的图表更加清晰。在我开始添加空行然后在paint中编辑它之前,是否有一种合理的方法来移动标签显示的位置并添加空行

例如:

    <html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['timeline']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var container = document.getElementById('timeline');
        var chart = new google.visualization.Timeline(container);
        var dataTable = new google.visualization.DataTable();

        dataTable.addColumn({ type: 'string', id: 'Project' });
        dataTable.addColumn({ type: 'string', id: 'Name' });
        dataTable.addColumn({ type: 'date', id: 'Start' });
        dataTable.addColumn({ type: 'date', id: 'End' });
        dataTable.addRows([
        ['Project A', 'Start Project', new Date(2017,0), new Date(2017,1)],

        ['Project B', 'Start Project', new Date(2027,0), new Date(2027,1)],

        [ 'Project C',  'Start project',    new Date(2018, 3),  new Date(2018, 4) ],
        [ 'Project C', 'Some stuff happens before the official start of project', new Date(2018,0), new Date(2018,1)],
        [ 'Project C' , 'Observable statistic has changed due to project', new Date(2018,7), new Date(2018,8)]
        ])
        var options = {
            timeline: { colorByRowLabel: true ,
                barLabelStyle: {fontSize:8},
                rowLabelStyle: {fontSize:10}
                }
        };
        chart.draw(dataTable, options);
      }
    </script>
  </head>
  <body>
    <div id="timeline" style="height: 1800px;"></div>
  </body>
</html>

load('current',{'packages':['timeline']});
google.charts.setOnLoadCallback(drawChart);
函数绘图图(){
var container=document.getElementById('timeline');
var chart=newgoogle.visualization.Timeline(容器);
var dataTable=new google.visualization.dataTable();
addColumn({type:'string',id:'Project'});
addColumn({type:'string',id:'Name'});
addColumn({type:'date',id:'Start'});
addColumn({type:'date',id:'End'});
dataTable.addRows([
[“项目A”,“启动项目”,新日期(2017,0),新日期(2017,1)],
[“项目B”,“启动项目”,新日期(2027,0),新日期(2027,1)],
[“项目C”,“启动项目”,新日期(2018年3月),新日期(2018年4月)],
[‘项目C’、‘项目正式开始前发生的一些事情’、新日期(2018,0)、新日期(2018,1)],
[‘项目C’、‘可观察统计数据因项目而发生变化’、新日期(2018,7)、新日期(2018,8)]
])
变量选项={
时间线:{colorByRowLabel:true,
barLabelStyle:{fontSize:8},
rowLabelStyle:{fontSize:10}
}
};
图表绘制(数据表、选项);
}

这不是一个简单的解决方案,一旦图表的
'ready'
事件触发,就必须关闭标签并手动将其添加到图表的svg中……不要担心您的案例。但是,从外观上看,如果你为标签保留一个单独的行,它可能看起来不那么吸引人。你可以在工具提示中显示它们(不那么凌乱)。绝对安全。