Question

我有垂直方向的Google Chart ComboGraph，我想在图表的底部和顶部显示从属轴（此配置中的水平轴）。

对于水平方向，我可以用来实现这个目的的方法是创建一个虚拟的第二轴 - 然后两个轴显示在图形的左侧和右侧。但这并不能转化为垂直方向的顶部和底部。

我不介意使用一些JS小提琴来实现结果，但我不清楚这是否可行 - 任何想法？

这是一个示例图表 - 还有一个问题是viewWindow似乎没有被任何一个轴所尊重，可以通过查看“水平”视图看到（'跟踪'和'蜡烛'应该放在一起））：

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
    google.charts.load('current', {'packages':['corechart']});
    google.charts.setOnLoadCallback(drawVisualization);

    function drawVisualization() {
        // Some raw data (not necessarily accurate)
        var data = google.visualization.arrayToDataTable([
             ['Value', 'Candle', '', '', '', 'Points', 'Tracking'],
             ['1',  165,      938,         938,              998,          450,      938],
             ['2', -150,      599,         599,             1268,          288,      599],
             ['3',  157,      587,         587,              807,          397,      587],
             ['4',  139,      615,         615,              968,          215,      615],
             ['5',  136,      629,         629,             1026,         1200,      629]
        ]);

        var options = {
            orientation:'vertical',
            title : '',
            vAxis: {title: ''},
            hAxis: {
                0: {
                    title: '0',
                    viewWindow: { min: -200, max: 1200 },
                    minorGridlines: { count: 4, color:'#E9E9E9' }
                },
                1: {
                    title: '1',
                    viewWindow: { min: -200, max: 1200 }
                }
            },
            seriesType: 'candlesticks',
            series: {
                1: {type: 'line', pointsVisible:true,lineWidth:0,color:'#FF9955'},
                2: {type:'bars',color:'#AAAAFF'},
                0: {color: 'blue', targetAxisIndex: 1}
        }
    };

    var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

如何在Google Chart中垂直绘制组合图，顶部和底部是双轴？

0 个答案: