谷歌图表中的角色注释

Question

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

             <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

注释

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

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

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, 1, {
  calc: 'stringify',
  sourceColumn: 1,
  type: 'string',
  role: 'annotation'              
}, 2, {
  calc: 'stringify',
  sourceColumn: 2,
  type: 'string',
  role: 'annotation'              
}]);

以下是完整的sn-p...

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);
        }
    });
}

注意：您使用的是旧版本的谷歌图表，
不应再使用。

替换脚本源，这里...

<script src="https://www.google.com/jsapi"></script>

与loader.js...

<script src="https://www.gstatic.com/charts/loader.js"></script>

唯一的其他变化是load语句，见上面的sn-p...

---

工具提示

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

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);
});

这是完整的sn-p...

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>