使用 Google 图表中的组合图表从 Candelsticks 系列获取边界框

Question

我刚刚开始使用 Google 图表，它非常棒。不幸的是（而且令人惊讶的是）它的目录中没有箱线图，所以我决定通过在烛台图表的顶部添加一条线来模拟它（我将烛台用作一系列组合图表，因为我也需要同一图中的折线图）。

令人沮丧的是，我尝试使用 getBoundingBox(id) 方法获取烛台图表每个框的属性，但我不知道如何指定 id。

The format for id isn't yet documented (they're the return values of event handlers), [...]

但我找不到任何迹象表明 事件处理程序' 的输出可能是怎样的。

如何指定 id 以便返回烛台图表的单个框？

// relevant part of the code
function drawChart() 
{
    var data = new google.visualization.arrayToDataTable([
        // data here
        ], true);

    var options = {
        vAxes: {
            0: {},
            1: {}, 
        },
        series: { 
            0: {
                type: "candlesticks", 
                targetAxisIndex: 0,
            },
            1: {
                type: "line",
                targetAxisIndex: 1,
            }
        }
    };

    var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));

    google.visualization.events.addListener(chart, 'ready', function()
    {
        var layout = chart.getChartLayoutInterface();
        var cries_in_the_corner = layout.getBoundingBox( /* useless attempt of id */ );

        console.log(cries_in_the_corner); // always 'null'
    });

    chart.draw(data, options);
}

Answer 1

您可以使用图表的 click 事件来查找 'id'

但它看起来与此类似...

'candlestick#0#0'

其中第一个 0 是系列号，第二个 0 是行号

请参阅以下工作代码段，单击的图表元素的属性将显示在控制台中...

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

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Mon', 20, 28, 38, 45],
    ['Tue', 31, 38, 55, 66],
    ['Wed', 50, 55, 77, 80],
    ['Thu', 77, 77, 66, 50],
    ['Fri', 68, 66, 22, 15]
  ], true);

  var chart = new google.visualization.ChartWrapper({
    chartType: 'CandlestickChart',
    containerId: 'chart_div',
    dataTable: data
  });

  google.visualization.events.addOneTimeListener(chart, 'ready', function () {
    google.visualization.events.addListener(chart.getChart(), 'click', function (gglClick) {
      console.log(JSON.stringify(gglClick));
    });
  });

  $(window).resize(function() {
    chart.draw();
  });
  chart.draw();
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="chart_div"></div>

使用 Google 图表中的组合图表从 Candelsticks 系列获取边界框

Get bounding box from Candelsticks series using Combo Chart in Google Charts

jquery

charts

google-visualization

boxplot

candlestick-chart