在点击腿部的相关关键人物时,我能够显示/照亮我行的界线,这是可能的吗?
• 沿用这些步骤,隐藏在你方言上:
1. 公布数据 1. 基于现有可数据物体的观点:
DataTable dataTable = DataTable.create();
DataView dataView = DataView.create(dataTable);
2. 结 论 ide/线一栏,你想要在数据表中隐藏:
dataView.hideColumns(new int[]{<id_of_the_column>});
3. 。 根据数据意见再次绘制整个图表:
chart.draw(dataView, getOptions());
请注意,这里有一个告诫,即第3步是代价高昂的一步,对我们来说,它正在走近20-30秒,以便绘制新的图表。 但是,如果数据不是大的,就应当从你的角度加以管理。
注:在用户检查/检查检查箱时,你必须用一个检查箱自行订票,并做上述工作。
如果你不需要包括规模和升值,那么一种选择就是用线性Width和地区Opacity值掩盖数据;
<head>
<script type= text/javascript src= https://www.google.com/jsapi ></script>
<script>
function updateTable() {
// quick data - cleaned up for this example real data sources
data = new Array();
data[0] = new Array();
data[0][0] = "Day";
data[0][1] = "Metric 1";
data[0][2] = "Metric 2";
data[0][3] = "Metric 3";
data[1] = new Array();
data[1][0] = 1;
data[1][1] = 200;
data[1][2] = 50;
data[1][3] = 400;
data[2] = new Array();
data[2][0] = 2;
data[2][1] = 440;
data[2][2] = 140;
data[2][3] = 40;
data[3] = new Array();
data[3][0] = 3;
data[3][1] = 300;
data[3][2] = 500;
data[3][3] = 600;
var gdata = google.visualization.arrayToDataTable(data);
var options = {
// title: kala ,
hAxis: {title: Days , titleTextStyle: {color: #333 }}
,vAxis: {minValue: 0}
,height: 300
,width: 600
,chartArea: {left: 60}
,lineWidth: 2
,series: {0:{color: black , areaOpacity: 0.3, lineWidth: 2}
,1:{color: red , areaOpacity: 0.3, lineWidth: 2}
,2:{color: purple , areaOpacity: 0.3, lineWidth: 2}}
};
var chart = new google.visualization.AreaChart(document.getElementById( my_chart ));
chart.draw(gdata, options);
google.visualization.events.addListener(chart,
select ,
(function (x) { return function () { AreaSelectHander(chart, gdata, options)}})(1));
}
function AreaSelectHander(chart, gdata, options) {
// when ever clicked we enter here
// more code needed to inspect what actually was clicked, now assuming people
// play nicely and click only lables...
var selection = chart.getSelection();
var view = new google.visualization.DataView(gdata);
console.log(options);
// click and data index are one off
i = selection[0].column - 1;
// just simple reverse
if (options.series[i].lineWidth == 0) {
options.series[i].lineWidth = 2;
options.series[i].areaOpacity = 0.3;
}
else {
options.series[i].lineWidth = 0;
options.series[i].areaOpacity = 0.0;
}
chart.draw(gdata, options);
}
</script>
<script type= text/javascript >
google.load( visualization , 1 , {packages:[ table , corechart ]});
google.setOnLoadCallback(updateTable);
</script>
</head>
<body>
<div id= my_chart ></div>
</body>
Following code display goggle line chart and have functionality to hide/show graph line by clicking on legend label. #graph_sales_data is id of div which display chart and sales_data_graph is variable containg record.
function drawChart() {
if (sales_data_graph.length > 1)
{
$( #graph_sales_data ).show();
var data = new google.visualization.arrayToDataTable(sales_data_graph);
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.ChartWrapper({
chartType: LineChart ,
containerId: graph_sales_data ,
dataTable: data,
colors: [ #ea6f09 , #fb250d , #0ac9c6 , #2680be , #575bee , #6bd962 , #ff0000 , #000000 ],
options: {
width: 1200,
height: 500,
fontSize: 10,
pointSize: 10
}
});
// create columns array
var columns = [0];
/* the series map is an array of data series
* "column" is the index of the data column to use for the series
* "roleColumns" is an array of column indices corresponding to columns with roles that are associated with this data series
* "display" is a boolean, set to true to make the series visible on the initial draw
*/
var seriesMap = [{
column: 1,
roleColumns: [1],
display: true
}, {
column: 2,
roleColumns: [2],
display: true
}, {
column: 3,
roleColumns: [3],
display: true
}, {
column: 4,
roleColumns: [4],
display: true
}, {
column: 5,
roleColumns: [5],
display: true
}, {
column: 6,
roleColumns: [6],
display: true
}, {
column: 7,
roleColumns: [7],
display: true
}, {
column: 8,
roleColumns: [8],
display: true
}];
var columnsMap = {};
var series = [];
for (var i = 0; i < seriesMap.length; i++) {
var col = seriesMap[i].column;
columnsMap[col] = i;
// set the default series option
series[i] = {};
if (seriesMap[i].display) {
// if the column is the domain column or in the default list, display the series
columns.push(col);
}
else {
// otherwise, hide it
columns.push({
label: data.getColumnLabel(col),
type: data.getColumnType(col),
sourceColumn: col,
calc: function() {
return null;
}
});
// backup the default color (if set)
if (typeof(series[i].color) !== undefined ) {
series[i].backupColor = series[i].color;
}
series[i].color = #CCCCCC ;
}
for (var j = 0; j < seriesMap[i].roleColumns.length; j++) {
//columns.push(seriesMap[i].roleColumns[j]);
}
}
chart.setOption( series , series);
function showHideSeries() {
var sel = chart.getChart().getSelection();
// if selection length is 0, we deselected an element
if (sel.length > 0) {
// if row is undefined, we clicked on the legend
if (sel[0].row == null) {
var col = sel[0].column;
if (typeof(columns[col]) == number ) {
var src = columns[col];
// hide the data series
columns[col] = {
label: data.getColumnLabel(src),
type: data.getColumnType(src),
sourceColumn: src,
calc: function() {
return null;
}
};
// grey out the legend entry
series[columnsMap[src]].color = #CCCCCC ;
}
else {
var src = columns[col].sourceColumn;
// show the data series
columns[col] = src;
series[columnsMap[src]].color = null;
}
var view = chart.getView() || {};
view.columns = columns;
chart.setView(view);
chart.draw();
}
}
}
google.visualization.events.addListener(chart, select , showHideSeries);
// create a view with the default columns
var view = {
columns: columns
};
chart.draw();
}
else
{
$( #graph_sales_data ).hide();
}
}
How do I create a Google Line Chart that displays two or more lines, with a different number of data points in each series? For instance, I want to create a chart with 2 lines, one showing the ...
If you don t want to, or can t use the Google Visualization service, are there (preferably open source) substitutes to use to have motion charts?
http://chart.apis.google.com/chart?cht=bhg&chd=t:3771.5,3220|5508.25,5366.75& chs=400x200&chds=0,9000&chxt=x&chxr=0,0,9000& chm=N*cUSD2s*,000000,0,-1,11|N*cUSD2s*,000000,1,-1,...
出口谷歌视觉组织图作为形象是否有任何途径? 我想,这是我网站的一个特点,因此人们可以点击一个 but子或一个链接,......
Using the Org Chart in the Google Visualization API, is there a way to flip the chart to a vertical layout instead of horizontal.
I am using Google Visualization Bar Chart and I would like to customize or change the tooltip text and format that appears when clicking on a bar. I have been through documentation but I didn t find ...
I am looking for a charts library to be displayed on a website. I will use intensively this library (for area, line and bar charts mainly), so I prefer to secure my choice before starting implementing....
Does anyone know how to disable the tool-tip boxes that popup when a Google Visualizations chart is clicked (Selected)? Following the sample code at Getting Started with Visualizations, the "...