Question

使用：http://code.google.com/apis/chart/interactive/docs/gallery/linechart.html#Loading

没有任何选项可以将y轴放在图表的右侧？真的？！：P

任何人都知道如何做这样一个“激进”的事情？图表API可以让你这样做，但不是可视化吗？

非常感谢。

Answer 1

您可以通过series选项解决此问题，并为系列[0]指定虚拟数据系列。像这样：

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load('visualization', '1', {packages: ['corechart']});
    </script>
    <script type="text/javascript">
      function drawVisualization() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'xAxis');
        data.addColumn('number', 'dummySeries');
        data.addColumn('number', 'realSeries');

        data.addRow(['x label', null, 2]); // dummy series value needs to be null, otherwise if interactivity is on, the user can discover the dummy values even if the line is hidden per below
        data.addRow(...iterate & add the rest of your data);

        new google.visualization.LineChart(document.getElementById('graphdiv')).
            draw(data, {curveType: 'function',
                        series:[{lineWidth:0},{targetAxisIndex:1}]} // specify right y-axis for 2nd series, and 'hide' the line for the 1st series as a precaution with lineWidth
                );
      }

      google.setOnLoadCallback(drawVisualization);
    </script>

Answer 2

        function singleUserChart() {
            google.charts.load('current', { packages: ['corechart', 'bar'] });
            google.charts.setOnLoadCallback(drawAnnotations);

            function drawAnnotations() {
                var dataPercentage = new google.visualization.DataTable();
                dataPercentage.addColumn('string', 'Productivity');
                dataPercentage.addColumn('number', 'Ravi');
                dataPercentage.addColumn({ type: 'string', role: 'annotation' });
                dataPercentage.addColumn('number', 'Avg Data');
                dataPercentage.addColumn({ type: 'string', role: 'annotation' });

                dataPercentage.addRows([
                  ['%Score1', 12, '12%', 15, '15%'],
                  ['%Score2', 25, '25%', 21, '21%']
                ]);
                singleUserChartOptions(dataPercentage, 'individualUserPercentageChart', true, 450);
            }
        }
        function singleUserChartOptions(chartData, chartDivId, isShowPercent, chartWidth) {
            var options = {
                annotations: {
                    alwaysOutside: true,
                    textStyle: {
                        fontSize: 15,
                        color: '#000',
                        auraColor: 'none'
                    }
                },
                vAxis: { format: (isShowPercent == true) ? '#\'%\'' : '', ticks :[0,10,20,30,40,50]},
                hAxis: {
                    slantedText: true,
                    slantedTextAngle: -45,
                    textStyle: { fontSize: 11 }
                },
                series: {
                    0: { targetAxisIndex: 0, },
                    1: { targetAxisIndex: 1, }
                },
                vAxes: {
                    0: { textPosition: 'none' },
                    1: {}
                },
                legend: { position: 'top' },
                width: chartWidth,
                height: 400
            };

            var chart = new google.visualization.ColumnChart(document.getElementById(chartDivId));
            chart.draw(chartData, options);
        }
        singleUserChart();

<html>
<head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
    <div id="individualUserPercentageChart" style="height: 500px; width: 100%"></div>
</body>
</html>

Google Visualization API - 将Y轴置于右侧？

2 个答案: