javascript - 谷歌图表 : Is it possible to have a pie chart substituting the dot in the scatterplot?

Question

我正在使用 Google Charts 构建一个交互式小部件。

现在，您可以在下面看到饼图和散点图。

虽然，希望散点图中有饼图而不是蓝色小点(甚至可以是图像。

知道怎么做吗？

花了 4 个小时进行研究，但没有找到任何能让我这样做的东西。

Answer 1

一些调试？

脚本

<script src="https://www.gstatic.com/charts/loader.js"></script>

////Callback that draws the scatter

        function draw0RiskChart() {
    var data = google.visualization.arrayToDataTable([
      ['Risk in %', 'Return in %'],
      [ 9.87,      6.53]
    ]);

    var options = {
      title: 'Risk vs. Return with 0% Hedge Fund',
      hAxis: {title: 'Risk', minValue: 5, maxValue: 10},
      vAxis: {title: 'Return', minValue: 5, maxValue: 10},
      width:400,
      height:300
    };

    var container = new google.visualization.ScatterChart(document.getElementById('0risk_chart_div'));
    var chart = new google.visualization.ScatterChart(container);


    // Wait for the chart to finish drawing before calling the getImageURI() method.

        google.visualization.events.addListener(chart, 'ready', function () {
            var layout = chart.getChartLayoutInterface();

            container.innerHTML = '<img src="' + chart.getImageURI() + '">';

            for (var i = 0; i < data.getNumberOfRows(); i++) {

            // add image above in every element

                var xPos = layout.getXLocation(data.getValue(i, 0));
                var yPos = layout.getYLocation(data.getValue(i, 1));

                var whiteHat = container.appendChild(document.createElement('img'));
                whiteHat.src = 'http://findicons.com/files/icons/512/star_wars/16/clone_old.png';
                whiteHat.className = 'whiteHat';

                // 16x16 (image size in this example)
                whiteHat.style.top = (yPos - 16) + 'px';
                whiteHat.style.left = (xPos) + 'px';

            }

            console.log(container.innerHTML);
        });



    chart.draw(data, options);
  }

风格

.whiteHat {
  border: none;
  position: absolute;
}

body

<div id="0risk_chart_div"></div>