Question

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

现在，你可以看到一张饼图和一个散点图。

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

如何做到这一点？

花4个小时做研究，没有找到任何让我这么做的事。

Answer 1

有些调试吗？

<强> SCRIPT

<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>

Google Charts：是否可以在散点图中使用饼图代替点？

1 个答案: