Javascript 谷歌图表仪表板-隐藏列

我使用GoogleCharts仪表板来显示折线图，并希望在运行时控制显示的元素。 例如：

function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
    ['x', 'Cats', 'Blanket 1', 'Blanket 2'],
    ['A',   1,       1,           0.5     ],
    ['B',   2,       0.5,         1       ],
    ['C',   4,       1,           0.5     ],
    ['D',   8,       0.5,         1       ],
    ['E',   7,       1,           0.5     ],
    ['F',   7,       0.5,         1       ],
    ['G',   8,       1,           0.5     ],
    ['H',   4,       0.5,         1       ],
    ['I',   2,       1,           0.5     ],
    ['J',   3.5,     0.5,         1       ],
    ['K',   3,       1,           0.5     ],
    ['L',   3.5,     0.5,         1       ],
    ['M',   1,       1,           0.5     ],
    ['N',   1,       0.5,         1       ]
]);

// Create and draw the visualization.
new google.visualization.LineChart(document.getElementById('visualization')).
  draw(data, {curveType: "function",
              width: 500, height: 400,
              vAxis: {maxValue: 10}}
      );
}

---

我希望以类似于中的方式控制

Cats

、

Blanket 1

和

Blanket 2

的可见性。

一种方法是使用标志值映射到Cats/Blanket 1/Blanket 2，然后相应地调用具有适当数据初始化的函数

google.charts.load（'current'，{packages:['corechart']}）；
功能可视化（标志）{
如果（标志==“猫”）
var data=google.visualization.arrayToDataTable([
['x'，'Cats']，
[A'，1]，
[B'，2]，
[C'，4]，
[D'，8]，
[E'，7]，
[F'，7]，
[G'，8]，
[H'，4]，
[I'，2]，
[J'，3.5]，
[K'，3]，
[L'，3.5]，
[M'，1]，
[N'，1]
]);
否则如果（标志==“毯子1”）
var data=google.visualization.arrayToDataTable([
['x'，'毛毯1']，
[A'，1]，
[B'，0.5]，
[C'，1]，
[D'，0.5]，
[E'，1]，
[F'，0.5]，
[G'，1]，
[H'，0.5]，
[I'，1]，
[J'，0.5]，
[K'，1]，
[L'，0.5]，
[M'，1]，
[N'，0.5]
]);
否则如果（标志==“毯子2”）
var data=google.visualization.arrayToDataTable([
['x'，'毛毯2']，
[A'，0.5]，
[B'，1]，
[C'，0.5]，
[D'，1]，
[E'，0.5]，
[F'，1]，
[G'，0.5]，
[H'，1]，
[I'，0.5]，
[J'，1]，
[K'，0.5]，
[L'，1]，
[M'，0.5]，
[N'，1]
]);
其他的
var data=google.visualization.arrayToDataTable([
['x'、'猫'、'毛毯1'、'毛毯2']，
[A'，1,1,0.5]，
[B'，2,0.5,1]，
[C'，4,1,0.5]，
[D'，8,0.5,1]，
[E'，7,1,0.5]，
[F'，7,0.5,1]，
[G'，8,1,0.5]，
[H'，4,0.5,1]，
[I'，2,1,0.5]，
[J'，3.5,0.5,1]，
[K'，3,1,0.5]，
[L'，3.5,0.5,1]，
[M'，1,1,0.5]，
[N'，1,0.5,1]
]);
新的google.visualization.LineChart（document.getElementById（'visualization'））。
绘制（数据，{curveType:“函数”，
宽：500，高：400，
变量：{maxValue:10}
);
}

猫
毛毯1
毯子2

我建议使用隐藏列

google.charts.load（'current'{
软件包：['corechart']，
回调：drawVisualization
});
功能可视化（类别）{
var data=google.visualization.arrayToDataTable([
['x'、'猫'、'毛毯1'、'毛毯2']，
[A'，1,1,0.5]，
[B'，2,0.5,1]，
[C'，4,1,0.5]，
[D'，8,0.5,1]，
[E'，7,1,0.5]，
[F'，7,0.5,1]，
[G'，8,1,0.5]，
[H'，4,0.5,1]，
[I'，2,1,0.5]，
[J'，3.5,0.5,1]，
[K'，3,1,0.5]，
[L'，3.5,0.5,1]，
[M'，1,1,0.5]，
[N'，1,0.5,1]
]);
var chart=new google.visualization.LineChart（document.getElementById（'visualization'）；
变量选项={
curveType:'函数'，
宽度：500，
身高：400，
言辞：{
最大值：10
}
};
var view=newgoogle.visualization.DataView（数据）；
var viewColumns=[0]；
开关（类别）{
“猫”案：
viewColumns.push（1）；
打破
案件“毯子1”：
viewColumns.push（2）；
打破
案件“毯子2”：
viewColumns.push（3）；
打破
违约：
viewColumns.push（1）；
viewColumns.push（2）；
viewColumns.push（3）；
}
view.setColumns（viewColumns）；
图表绘制（视图、选项）；
}

全部的
猫
毛毯1
毯子2

@Tal Yaari另一种方法是初始化数组，并使用下面的函数根据索引修改数组，并相应地重新初始化图表