带有图例和其他颜色的 Google 图表 API 散点图答案

【问题标题】：Google charts API scatter chart with legend and other colors带有图例和其他颜色的 Google 图表 API 散点图
【发布时间】：2013-01-17 14:54:08
【问题描述】：

我有一个例子：

// Load the Visualization API and the piechart package.
        google.load('visualization', '1.0', {'packages':['corechart']});

        // Set a callback to run when the Google Visualization API is loaded.
        google.setOnLoadCallback(drawChart1);

        // Callback that creates and populates a data table,
        // instantiates the pie chart, passes in the data and
        // draws it.
        function drawChart1() {
            var data = new google.visualization.DataTable(
            {
                cols: [
                    {id: 'A', label: 'A', type: 'number'},
                    {id: 'B', label: 'B', type: 'number'},
                    {id: 'C', label: 'C', type:'tooltip', p:{role:'tooltip'}}
                ],
                rows: [
                    {c:[{v: 2}, {v: 3}, {v:'Allen'}]},
                    {c:[{v: 4}, {v: 2}, {v:'Tom'}]},
                    {c:[{v: 1}, {v: 3}, {v:'Sim'}]}

                ]
            })

            var options = {
                title: 'Age vs. Weight comparison',
                hAxis: {title: 'Age', minValue: 1, maxValue: 5},
                vAxis: {title: 'Weight', minValue: 1, maxValue: 5},
                legend: ''
            };

            var chart = new google.visualization.ScatterChart(document.getElementById('chart_scatter_container'));
            chart.draw(data, options);
        }

http://jsfiddle.net/eAWcC/1/

当我悬停一次数据时，工具提示将看到我为该数据添加的标签。这很好。

但我想看到所有的值都是不同的颜色并放在图例中。

怎么做？

【问题讨论】：

标签： javascript google-api google-visualization

【解决方案1】：

散点图数据表中的列是图例中显示的列，颜色不同。为了单独显示它们，您需要重新排列数据，以便每个人都有自己的列。

例如，将您的数据表变量替换为：

            var data = google.visualization.arrayToDataTable([
              ['x', 'Allen', 'Tom', 'Sim'],
              [1, null, null, 3],
              [2, 3, null, null],
              [4, null, 2, null],
            ]);

这样做会给你想要的输出（我相信，检查here）。

但是，这种方法的问题是您最终会在每个系列中得到很多“空”值（因为您只有单点）。为了简化此过程，您可以编写一个循环来遍历您的数据并为新表设置适当的格式。基本代码是：

将 X 值列添加到新表中
对于第 2 列（工具提示）中的每一行，在新表中创建一个新列
对于第 1 列中的每一行（Y 值）沿对角线向下/向右填充

这看起来像这样：

          var newTable = new google.visualization.DataTable();

          newTable.addColumn('number', 'Age');
          for (var i = 0; i < data.getNumberOfRows(); ++i) {
            newTable.addColumn('string', data.getValue(i, 2));
            newTable.addRow();
          }

          for (var j = 0; j < data.getNumberOfRows(); ++j) {
            newTable.setValue(j, j + 1, data.getValue(j, j + 1));
          }

（以上代码已经过测试，但不喜欢第二个 for() 循环，原因超出我的理解）。

【讨论】：