如何自定义有角度的谷歌图表图例信息 [英] How to customize angular google chart legend info

问题描述

我有谷歌图表（折线图），需要自定义图例和一些额外的信息。请参考此 http://plnkr.co/edit/ysZwYaAQpMhHarcA2UHq?p=preview [Plunker] [1] 更详细地了解。我想要下面的传奇信息，请点击

I have google chart (line chart), need to customize legend with some extra information. Please refer this http://plnkr.co/edit/ysZwYaAQpMhHarcA2UHq?p=preview [Plunker][1] to know more in detail. I want legend information like this below snap

因此，如果你看到下面的图片，我的小提琴我有R1 ，R2，R3等作为选择的版本，每个版本都有自己的分数，所以我希望该分数显示为R1 100，如下图所示。
请注意，图表数据不同，选择发布数据的下拉列表也不同。但两者都有releaseId R1，R2。所以在选择下拉值时说R1，R2或R3我只将那行从graphdata推到绘图。

So if you see in below image, and my fiddle I have R1, R2 , R3 and so on as releases to select, and each release has its own score, so I want that score to be shown as R1 100 just like below image. Note that graph data is different, and the dropdown for selection of releases data is different. but both have releaseId R1 , R2. So on selection of dropdown value say R1,R2 or R3 I am pushing only that row from graphdata to drawgraph.

所以基本上，我需要在图例中显示选定的R1分数。

So basically, I need to show selected R1 score in legend.

请提前给我一些想法或链接。在此先感谢。

Please give me some idea or link where this is done earlier. Thanks in advance.

推荐答案

将分数添加到图例中，

您可以将分数添加到在绘制图表之前的列标签

to add the score to the legend,
you can add the score to the column label before drawing the chart

用以下内容替换 drawChart 函数...

replace the drawChart function with the following...

    function drawChart() {
        var chartColors = [];
        var chartColumns = [0];
        var checks = document.getElementsByTagName('input');
        for (var i = 0; i < $scope.selectedNewRelease.length; i++) {
            var seriesColumn = getColumnIndex(x, $scope.selectedNewRelease[i].releaseId);
            chartColumns.push(seriesColumn);
            x.setColumnLabel(seriesColumn, x.getColumnLabel(seriesColumn) + ' ' + $scope.selectedNewRelease[i].score);
        }
        var view = new google.visualization.DataView(x);
        view.setColumns(chartColumns);
        chart.draw(view, options);
          if ($scope.selectedNewRelease.length>0) {
                $scope.Grtgraph=true;
            }else{
                $scope.Grtgraph=false;
            }
    }

    function getColumnIndex(data, columnLabel) {
      for (var i = 0; i < data.getNumberOfColumns(); i++) {
        if (data.getColumnLabel(i) === columnLabel) {
          return i;
        }
      }
    }

这篇关于如何自定义有角度的谷歌图表图例信息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！