Question

我正在使用angularjs google chart API中的时间轴图表。从时间轴图表API我明白只允许4列，另一列是工具提示列。我有一个要求，即我将该行的ID与描述一起附加，并且我想在单击该行但不想在标签上显示时传递该ID。

js code：

angular.module('myApp', ['googlechart'])
    .controller('myController', function($scope,$timeout) {
        var chart1 = {};
        chart1.type = "Timeline";
        chart1.displayed = false;
        var container = document.getElementById('timeline')
        chart1.data = {
            "cols": [{
                id: "month",
                label: "Month",
                type: "string"
            }, {
                id: "description",
                label: "Description",
                type: "string"
            }, {
                id: "start",
                label: "start",
                type: "date"
            }, {
                id: "end",
                label: "end",
                type: "date"
            }],
            "rows": [{
                c: [{
                    v: "January"
                }, {
                    v: "Jan text here -$@ 1001".trim().split(' -$@')[0]
                }, {
                    v: new Date(2018, 3, 1)
                }, {
                    v:new Date(2018, 4, 12)
                } ]
            }, {
                c: [{
                    v: "February"
                }, {
                    v: "feb text here -$@ 1002".trim().split(' -$@')[0]
                }, {
                    v: new Date(2018,4, 1)
                }, {
                    v: new Date(2018, 4, 15)
                } ]
            } , {
                c: [{
                    v: "april"
                }, {
                    v: "april text here -$@ 1003".trim().split(' -$@')[0]
                }, {
                    v: new Date(2018,5, 1)
                }, {
                    v: new Date(2018, 7, 15)
                } ]
            }  ]
        };
        chart1.options = {
            timeline: {
                showRowLabels: false,
            },
        };

        $scope.seriesSelected = function(selectedItem) {
         var rowValue = chart1.data.rows[selectedItem.row].c[1].v;
         alert(rowValue);
       }
       $scope.myChart = chart1;
   });

在上面的js代码中，我将1001,1002,..之类的rowID附加到描述列（Jan text here -$@ 1001".trim().split(' -$@')[0]），但是使用trim()因为我不应该在屏幕上显示ID。单击该行时 var rowValue = chart1.data.rows[selectedItem.row].c[1].v;我希望将整个值设为Jan text here -$@ 1001，但不会显示演示链接中显示的ID值。有关如何将描述中附加的ID值（1001,1002 ..）传递给$scope.seriesSelected的任何输入。

PS：是否可以包含另一个列，我可以在其中分配ID值（1001,1002 ..），但不应在网页/工具提示中显示。

Answer 1

您可以为每个单元格，行或列指定属性...

            c: [{
                v: "January"
            }, {
                v: "Jan text here", p: {id: 1001}
            },
            ...

并使用数据表方法来获取/设置...

dataTable.getProperty(rowIndex, columnIndex, name);

dataTable.setProperty(rowIndex, columnIndex, name, value);

或直接从用作数据表的json访问属性...

chart1.data.rows[selectedItem.row].c[1].p.id

想要将一个额外的列值传递给$ scope.seriesSelected

1 个答案: