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

2024-01-07

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 Required change in legend snap

因此,如果您在下图中看到,我的小提琴有 R1、R2、R3 等版本可供选择,每个版本都有自己的分数,所以我希望该分数显示为 R1 100,如下图所示。 请注意,图形数据不同,并且用于选择发布数据的下拉列表也不同。但两者都有releaseId R1 , R2 。因此,在选择下拉值时,例如 R1、R2 或 R3,我仅将该行从图形数据推送到绘图。

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

请给我一些想法或链接,这是之前完成的。提前致谢。


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

更换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;
        }
      }
    }
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何自定义角度谷歌图表图例信息 的相关文章

随机推荐