注释
我们可以使用数据视图添加注释角色。
我们需要在数据表的每个系列之后添加角色。
首先,从数据表创建数据视图。
var data = google.visualization.arrayToDataTable(r.d);
var view = new google.visualization.DataView(data);
然后在数据视图上使用setColumns
方法,
我们包括原始数据表列的列索引,
然后添加角色。
view.setColumns([0,1,{
calc: 'stringify',sourceColumn: 1,type: 'string',role: 'annotation'
}]);
如果您有多个系列(例如2),那么它将是...
view.setColumns([0,role: 'annotation'
},2,sourceColumn: 2,role: 'annotation'
}]);
以下为完整摘要...
google.charts.load('current',{
packages: ['corechart']
}).then(drawChart);
function drawChart() {
var options = {
title: 'Ticket Encours',width: 1700,height: 400,bar: { groupWidth: "90%" },legend: 'none',isStacked: true,hAxis: { minValue: 0,maxValue: 9 },curveType: 'function',pointSize: 10,};
$.ajax({
type: "POST",url: "Home.aspx/GetLineChartData",data: '{}',contentType: "application/json; charset=utf-8",dataType: "json",success: function (r) {
var data = google.visualization.arrayToDataTable(r.d);
var view = new google.visualization.DataView(data);
view.setColumns([0,{
calc: 'stringify',role: 'annotation'
}]);
var chart = new google.visualization.AreaChart($("#chart_Line")[0]);
chart.draw(view,options);
},failure: function (r) {
alert(r.d);
},error: function (r) {
alert(r.d);
}
});
}
注意:您使用的是旧版的Google图表,
不应再使用。
在此处替换脚本源...
<script src="https://www.google.com/jsapi"></script>
带有loader.js
...
<script src="https://www.gstatic.com/charts/loader.js"></script>
,唯一的其他更改是对load
语句的更改,请参见上面的代码段...
工具提示
关于始终显示工具提示,
我们需要添加以下图表选项。
将鼠标悬停在和上时,将显示工具提示。
tooltip: {trigger: 'both'}
此选项允许多个选择...
selectionMode: 'multiple'
默认情况下,当做出多项选择时,
该图表将在一个工具提示中显示所有选择。
如果要为所有点提供单独的工具提示,则需要添加此选项。
aggregationTarget: 'none'
然后在图表的'ready'
事件中,
我们将手动选择所有点。
要选择一行,我们提供了一个对象数组,其中包含用于选择行和列的键
chart.setSelection([{row: 0,column: 1},{row: 1,column: 1}]);
要全部选中,我们将使用数据表方法getSortedRows
这将为我们提供所有行索引的数组
因此,要选择第1列的所有行...
google.visualization.events.addListener(chart,'ready',function () {
var rows = [];
data.getSortedRows({column: 0}).forEach(function (row) {
rows.push({row: row,column: 1});
});
chart.setSelection(rows);
});
这是完整的代码段...
google.charts.load('current',tooltip: {trigger: 'both'},selectionMode: 'multiple',aggregationTarget: 'none'
};
$.ajax({
type: "POST",role: 'annotation'
}]);
var chart = new google.visualization.AreaChart($("#chart_Line")[0]);
google.visualization.events.addListener(chart,function () {
var rows = [];
data.getSortedRows({column: 0}).forEach(function (row) {
rows.push({row: row,column: 1});
});
chart.setSelection(rows);
});
chart.draw(view,error: function (r) {
alert(r.d);
}
});
}
这是一个可行的示例...
google.charts.load('current',{
packages: ['corechart']
}).then(function () {
var options = {
title: 'Ticket Encours',aggregationTarget: 'none'
};
var data = google.visualization.arrayToDataTable([
['x','y'],[1,115],[2,116],[3,117],[4,118],[5,119],[6,125],[7,135],[8,145],[9,142],[10,140],[11,136],[12,128],[13,120],[14,[15,[16,[17,112],[18,110],[19,[20,109],]);
var view = new google.visualization.DataView(data);
view.setColumns([0,{
calc: 'stringify',role: 'annotation'
}]);
var chart = new google.visualization.AreaChart($("#chart_Line").get(0));
google.visualization.events.addListener(chart,function () {
var rows = [];
data.getSortedRows({column: 0}).forEach(function (row) {
rows.push({row: row,column: 1});
});
chart.setSelection(rows);
});
chart.draw(view,options);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_Line"></div>
本文链接:https://www.f2er.com/3094844.html