google 图表中的角色注释

Question

我要补充角色：'annotation' 显示价值但我不知道如何.. 和如果有任何其他方法可以使工具提示始终显示，请告诉我如何谢谢
编辑：如果有任何其他方法可以使工具提示始终显示，请告诉我如何谢谢编辑：

             <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>

Answer 1

注释

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

首先，从数据 table 创建数据视图。

var data = google.visualization.arrayToDataTable(r.d);

var view = new google.visualization.DataView(data);

然后在数据视图上使用setColumns方法，
我们包括原始数据 table 列的列索引，
然后添加角色。

view.setColumns([0, 1, {
  calc: 'stringify',
  sourceColumn: 1,
  type: 'string',
  role: 'annotation'              
}]);

如果您有多个系列，例如 2 个，那么它将是...

view.setColumns([0, 1, {
  calc: 'stringify',
  sourceColumn: 1,
  type: 'string',
  role: 'annotation'              
}, 2, {
  calc: 'stringify',
  sourceColumn: 2,
  type: 'string',
  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, 1, {
              calc: 'stringify',
              sourceColumn: 1,
              type: 'string',
              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 语句，请参阅上面的代码片段...

工具提示

关于让工具提示始终显示，
我们需要添加以下图表选项。
这将使工具提示在点悬停时显示，和 selected。

tooltip: {trigger: 'both'}

此选项允许多个 select离子...

selectionMode: 'multiple'

默认情况下，当生成多个 select 离子时，
该图表将在一个工具提示中显示所有 select 离子。
如果你想为所有点单独的工具提示，需要添加这个选项。

aggregationTarget: 'none'

然后在图表的 'ready' 事件上，
我们将手动 select 所有点。
对于 select 行，我们提供了一个对象数组，其中包含行和列的键 select

chart.setSelection([{row: 0, column: 1}, {row: 1, column: 1}]);

到select全部，我们将使用数据table方法getSortedRows
这将为我们提供所有行索引的数组

所以，select 第 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', {
  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,
        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 = new 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);
        }
    });
}

这是一个工作示例...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  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'
  };

  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, 118],
    [15, 117],
    [16, 116],
    [17, 112],
    [18, 110],
    [19, 110],
    [20, 109],
  ]);

  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1, {
    calc: 'stringify',
    sourceColumn: 1,
    type: 'string',
    role: 'annotation'
  }]);

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

<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>

google 图表中的角色注释

role annotation in google chart

c#

sql

charts

google-visualization