google.load("visualization", "1", {packages: ["corechart", 'bar', 'Controls']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var chartsdata = new google.visualization.DataTable();
chartsdata.addColumn('date', 'Datum');
chartsdata.addColumn('number', 'TijdAfd1');
chartsdata.addColumn({
'type': 'string',
'role': 'annotation'
});
chartsdata.addColumn('number', 'TijdAfd2');
chartsdata.addColumn({
'type': 'string',
'role': 'annotation'
});
chartsdata.addColumn('number', 'TijdAfd3');
chartsdata.addColumn({
'type': 'string',
'role': 'annotation'
});
chartsdata.addRows([
[new Date('2017-05-29'), 56, '7,3m³', 42, '5,7m³', 59, '9524m³'],
[new Date('2017-05-30'), 29, '3,8m³', 23, '3,1m³', 30, '4746m³'],
[new Date('2017-05-31'), 53, '6,9m³', 13, '1,8m³', 60, '9522m³'],
[new Date('2017-06-01'), 47, '6,1m³', 45, '6,2m³', 53, '8463m³'],
[new Date('2017-06-02'), 69, '9,1m³', 48, '6,7m³', 66, '10502m³'],
[new Date('2017-06-03'), 39, '5,1m³', 25, '3,4m³', 41, '6604m³'],
[new Date('2017-06-04'), 51, '6,7m³', 44, '6,0m³', 43, '6800m³']
]);
// Create a dashboard.
var dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard_div'));
// Create a range slider, passing some options
var ChartRangeFilter = new google.visualization.ControlWrapper({
controlType: 'ChartRangeFilter',
containerId: 'filter_div',
options: {
//displayLabels: false,
//displayAnnotations: false,
tooltip: {
isHtml: true
},
filterColumnLabel: 'Datum',
ui: {
chartOptions: {
height: 55
}
}
},
// exclude annotation columns
view: {
columns: [0, 1, 3, 5]
}
});
// Create a Column chart, passing some options
var ColumnChart = new google.visualization.ChartWrapper({
chartType: 'ColumnChart',
containerId: 'chart_div',
options: {
focusTarget: 'category',
tooltip: {
isHtml: true
}
}
});
// Establish dependencies, declaring that 'filter' drives 'ColumnChart',
// so that the column chart will only display entries that are let through
// given the chosen slider range.
dashboard.bind(ChartRangeFilter, ColumnChart);
// Draw the dashboard.
dashboard.draw(chartsdata);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="dashboard_div">
<!--Divs that will hold each control and chart-->
<div id="filter_div"></div>
<div id="chart_div"></div>
</div>
我添加了一个仪表板控件并将ChartRangeFilter和ColumnChart绑定到它。如果我在ChartRangeFilter上配置一个视图以排除用于注释的列,那么这些注释也会从我的ColumnChart中消失。在ChartRangeFilter上将displayAnnotations设置为false不会更改任何内容。
google.load("visualization", "1", { packages: ["corechart", 'bar', 'Controls'] });
google.setOnLoadCallback(drawChart);
function drawChart() {
$.ajax({
type: "POST",
url: '@Url.Action("AjaxMethod", "AcuatorsRunTimes")',
data: { StartDate: "@ViewData["StartDate"]", EndDate: "@ViewData["EndDate"]" },
success: function (Data) {
var data1 = new google.visualization.arrayToDataTable(Data);
var chartsdata = new google.visualization.DataTable();
chartsdata.addColumn('date', 'Datum');
chartsdata.addColumn({ 'type': 'string', 'role': 'tooltip', 'p': { 'html': true } });
chartsdata.addColumn('number', 'TijdAfd1');
//chartsdata.addColumn('string', "VolumeAfd1");
chartsdata.addColumn({ 'type': 'string', 'role': 'annotation' });
chartsdata.addColumn('number', 'TijdAfd2');
//chartsdata.addColumn('string', "VolumeAfd2");
chartsdata.addColumn({ 'type': 'string', 'role': 'annotation' });
chartsdata.addColumn('number', 'TijdAfd3');
//chartsdata.addColumn('string', "VolumeAfd3");
chartsdata.addColumn({ 'type': 'string', 'role': 'annotation' });
for (var i = 1; i < data1.getNumberOfRows(); i++) {
var myDate = Date.parse(data1.getFormattedValue(i, 0));
var titles = ['Afdeling 1', 'Afdeling 2', 'Afdeling 3'];
var values = [data1.getFormattedValue(i, 4), data1.getFormattedValue(i, 5), data1.getFormattedValue(i, 6)];
var Anno1 = data1.getFormattedValue(i, 7) + 'm³';
var Anno2 = data1.getFormattedValue(i, 8) + 'm³';
var Anno3 = data1.getFormattedValue(i, 9) + 'm³';
chartsdata.addRow([new Date(myDate), HTMLtableRows(titles, values), parseInt(data1.getFormattedValue(i, 1)), Anno1, parseInt(data1.getFormattedValue(i, 2)), Anno2, parseInt(data1.getFormattedValue(i, 3)), Anno3]);
}
// Create a dashboard.
var dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard_div'));
// Create a range slider, passing some options
var ChartRangeFilter = new google.visualization.ControlWrapper({
controlType: 'ChartRangeFilter',
containerId: 'filter_div',
options: {
//displayLabels: false,
//displayAnnotations: false,
tooltip: { isHtml: true },
filterColumnLabel: 'Datum',
ui: {
chartType: 'LineChart',
chartOptions: {
height: 55
}
}
}
});
// Create a column chart, passing some options
var ColumnChart = new google.visualization.ChartWrapper({
chartType: 'ColumnChart',
containerId: 'chart_div',
options: {
focusTarget: 'category',
tooltip: { isHtml: true }
}
});
// Establish dependencies, declaring that 'filter' drives 'ColumnChart',
// so that the column chart will only display entries that are let through
// given the chosen slider range.
dashboard.bind(ChartRangeFilter, ColumnChart);
// Draw the dashboard.
dashboard.draw(chartsdata);
},
failure: function (Data) {
alert(Data.d);
},
error: function (Data) {
alert(Data.d);
}
});
}
答案 0 :(得分:0)
包含用于绘制仪表板的数据表中的注释列,
然后从过滤器上的view
属性中排除这些列...
var ChartRangeFilter = new google.visualization.ControlWrapper({
controlType: 'ChartRangeFilter',
containerId: 'filter_div',
options: {
tooltip: { isHtml: true },
filterColumnLabel: 'Datum',
ui: {
chartType: 'LineChart',
chartOptions: {
height: 55
}
}
},
// exclude annotation columns
view: {
columns: [0, 1, 2, 4, 6]
}
});
编辑
通过使范围过滤器透明来隐藏范围过滤器上的注释
将以下内容添加到chartOptions
...
annotations: {
highContrast: false,
stem: {
color: 'transparent',
length: 0
},
textStyle: {
color: 'transparent'
}
},
请参阅以下工作代码段...
google.load("visualization", "1", {packages: ["corechart", 'bar', 'Controls']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var chartsdata = new google.visualization.DataTable();
chartsdata.addColumn('date', 'Datum');
chartsdata.addColumn('number', 'TijdAfd1');
chartsdata.addColumn({
'type': 'string',
'role': 'annotation'
});
chartsdata.addColumn('number', 'TijdAfd2');
chartsdata.addColumn({
'type': 'string',
'role': 'annotation'
});
chartsdata.addColumn('number', 'TijdAfd3');
chartsdata.addColumn({
'type': 'string',
'role': 'annotation'
});
chartsdata.addRows([
[new Date('2017-05-29'), 56, '7,3m³', 42, '5,7m³', 59, '9524m³'],
[new Date('2017-05-30'), 29, '3,8m³', 23, '3,1m³', 30, '4746m³'],
[new Date('2017-05-31'), 53, '6,9m³', 13, '1,8m³', 60, '9522m³'],
[new Date('2017-06-01'), 47, '6,1m³', 45, '6,2m³', 53, '8463m³'],
[new Date('2017-06-02'), 69, '9,1m³', 48, '6,7m³', 66, '10502m³'],
[new Date('2017-06-03'), 39, '5,1m³', 25, '3,4m³', 41, '6604m³'],
[new Date('2017-06-04'), 51, '6,7m³', 44, '6,0m³', 43, '6800m³']
]);
// Create a dashboard.
var dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard_div'));
// Create a range slider, passing some options
var ChartRangeFilter = new google.visualization.ControlWrapper({
controlType: 'ChartRangeFilter',
containerId: 'filter_div',
options: {
//displayLabels: false,
//displayAnnotations: false,
tooltip: {
isHtml: true
},
filterColumnLabel: 'Datum',
ui: {
chartOptions: {
annotations: {
highContrast: false,
stem: {
color: 'transparent',
length: 0
},
textStyle: {
color: 'transparent'
}
},
height: 55
}
}
}
});
// Create a Column chart, passing some options
var ColumnChart = new google.visualization.ChartWrapper({
chartType: 'ColumnChart',
containerId: 'chart_div',
options: {
focusTarget: 'category',
tooltip: {
isHtml: true
}
}
});
// Establish dependencies, declaring that 'filter' drives 'ColumnChart',
// so that the column chart will only display entries that are let through
// given the chosen slider range.
dashboard.bind(ChartRangeFilter, ColumnChart);
// Draw the dashboard.
dashboard.draw(chartsdata);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="dashboard_div">
<!--Divs that will hold each control and chart-->
<div id="filter_div"></div>
<div id="chart_div"></div>
</div>