如何自定义有角度的谷歌图表图例信息

时间:2017-04-24 11:50:05

标签: javascript angularjs charts

我有谷歌图表(折线图),需要自定义图例和一些额外的信息。请参阅此http://plnkr.co/edit/ysZwYaAQpMhHarcA2UHq?p=preview [Plunker][1]以了解更多详情。我希望下面的图例信息像Required change in legend snap

一样

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

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

请提前告诉我一些想法或链接。提前谢谢。

1 个答案:

答案 0 :(得分:1)

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

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

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