Google图表中的角色注释

我想添加 角色:“注释” 展示价值 但我不知道怎么.. 和 如果还有其他方法可以使工具提示始终显示,请告诉我如何 谢谢
编辑: 如果还有其他方法可以使工具提示始终显示,请告诉我如何 谢谢 编辑:

             <script type="text/javascript">
    google.load("visualization","1",{ packages: ["corechart"] });
    google.setOnLoadCallback(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,tooltip: {trigger: 'both'},selectionmode: 'multiple',aggregationTarget: 'none'

        };


        $.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 = google.visualization.DataView(data);
            view.setColumns([0,1,{
              calc: 'stringify',sourceColumn: 1,type: 'string',role: 'annotation'
            }]);

                var chart = new google.visualization.AreaChart($("#chart_Line")[0]);
                 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);
            });

            chart.draw(view,options);
            },failure: function (r) {
                alert(r.d);
            },error: function (r) {
                alert(r.d);
            }
        });
    }
</script>
GAOWEI324 回答:Google图表中的角色注释

注释

我们可以使用数据视图添加注释角色。
我们需要在数据表的每个系列之后添加角色。

首先,从数据表创建数据视图。

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

大家都在问