Google Visualization API - Поместить ось Y с правой стороны? - PullRequest
Новая
       6

Google Visualization API - Поместить ось Y с правой стороны?

1 голос
/ 21 июля 2011

Использование: http://code.google.com/apis/chart/interactive/docs/gallery/linechart.html#Loading

Нет ли вариантов поместить ось y в правую часть графика? За реал ?! : P

Кто-нибудь знает, как сделать такую ​​«радикальную» вещь? API диаграмм позволяет вам это делать, но не визуализацию?

Спасибо, ТАК.

Ответы [ 2 ]

5 голосов
/ 09 октября 2011

Вы можете обойти это с помощью опции 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>
0 голосов
/ 30 марта 2017 

        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>

enter image description here

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...