首页 > 解决方案 > 谷歌甘特图将 X 轴移动到顶部而不是底部

问题描述

google.charts.load('current', {'packages': ['gantt'] }); google.charts.setOnLoadCallback(drawChart);

                          function drawChart() {

                                         var data = new google.visualization.DataTable();
                                         data.addColumn('string', 'Task ID');
                                         data.addColumn('string', 'Task Name');
                                         data.addColumn('string', 'Resource');
                                         data.addColumn('date', 'Start Date');
                                         data.addColumn('date', 'End Date');
                                         data.addColumn('number', 'Duration');
                                         data.addColumn('number', 'Percent Complete');
                                         data.addColumn('string', 'Dependencies');

                                         data.addRows([
                                                        ['2014Spring', 'Spring 2014            ', 'spring',
                                                                       new Date(2010, 5, 10), new Date(2010, 5, 12), null, 100, null],
                                                        ['2014Summer', 'Summer 2014', 'summer',
                                                                       new Date(2010, 5, 13), new Date(2010, 5, 14), null, 100, null],
                                                        ['2014Autumn', 'Autumn 2014', 'autumn',
                                                                       new Date(2010, 5, 15), new Date(2010, 5, 16), null, 100, null],

                                         ]);
                                         debugger;
                                         var options = {
                                                        height: 400,
                                                        gantt: {
                                                                       palette: [
                                                                       ],
                                                                       trackHeight: 30,
                                                                       labelStyle: {
                                                                                      fontName: ["RobotoCondensedRegular"],
                                                                                      fontSize: 15
                                    `enter code here`                                   },
                                                                       textPosition: 'TOP',          ## Heading ##
                                                        },


                                         };

                                         var chart = new google.visualization.Gantt(document.getElementById('chart_div'));
                                         for (i = 0; i < data.hg.length;i++) {
                                                        if (data.hg[i].c[2].v == 'spring') {
                                                                       options.gantt.palette.push({
                                                                                      "color": "#00FF00",
                                                                                      "dark": "#00FF00",
                                                                                      "light": "#00FF00"
                                                                       });
                                                        }
                                                        else if (data.hg[i].c[2].v == 'summer') {
                                                                       options.gantt.palette.push({
                                                                                      "color": "#00FF00",
                                                                                      "dark": "#0000FF",
                                                                                      "light": "#FF0000"
                                                                       });
                                                        }
                                                        else {
                                                                       options.gantt.palette.push({
                                                                                      "color": "#00FF00",
                                                                                      "dark": "#FF0000",
                                                                                                     "light": "#FF0000"
                                                                       });
                                                        }
                                         }
                                         chart.draw(data, options);
                          }

    </script>
</head>
<body>
    <div id="chart_div"></div>
</body>

以上是我正在使用并试图将底部 x 轴移动到顶部的谷歌甘特图的代码。

我相信需要进行一些调整才能做到这一点,这是我无法理解的。对此的任何帮助都会很棒。

标签: javascriptchartsgantt-charthighcharts-gantt

解决方案


推荐阅读