C# 谷歌图表中的角色标注_C#_Sql_Charts_Google Visualization

C# 谷歌图表中的角色标注

c# sql charts google-visualization

C# 谷歌图表中的角色标注,c#,sql,charts,google-visualization,C#,Sql,Charts,Google Visualization,我想补充一点角色：'annotation' 显示价值但是我不知道怎么。。和如果有任何其他方法使工具提示始终显示，请告诉我如何谢谢编辑：如果有任何其他方法使工具提示始终显示，请告诉我如何谢谢编辑： <script type="text/javascript"> google.load("visualization", "1", { packages: ["corechart"] }); google.setOnLoadCall

我想补充一点角色：'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>


load（“可视化”、“1”、{packages:[“corechart”]}）；
setOnLoadCallback（drawChart）；
函数绘图图（）{
变量选项={
标题:"检票",，
宽度：1700，
身高：400，
条：{groupWidth:“90%”，
图例：“无”，
isStacked：是的，
hAxis:{minValue:0，maxValue:9}，
curveType:'函数'，
点数：10，
工具提示：{trigger:'both'}，
selectionMode:'多个'，
aggregationTarget:“无”
};
$.ajax({
类型：“POST”，
url:“Home.aspx/GetLineChartData”，
数据：“{}”，
contentType:“应用程序/json；字符集=utf-8”，
数据类型：“json”，
成功：功能（r）{
var data=google.visualization.arrayToDataTable（r.d）；
var view=google.visualization.DataView（数据）；
view.setColumns（[0,1,1{
计算：'字符串化'，
资料来源专栏：1，
键入：“字符串”，
角色：“注释”
}]);
var chart=new google.visualization.AreaChart（$（“#chart_Line”）[0]）；
google.visualization.events.addListener（图表'ready'，函数（）{
var行=[]；
data.getSortedRows（{column:0}）.forEach（函数（行）{
rows.push（{row:row，column:1}）；
});
图表.选举（行）；
});
图表绘制（视图、选项）；
},
故障：功能（r）{
警报（r.d）；
},
错误：函数（r）{
警报（r.d）；
}
});
}

注释

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

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

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

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

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

以下是完整的片段

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

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

在此处替换脚本源

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

唯一的其他更改是加载语句，请参见上面的代码段

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

工具提示

至于使工具提示始终显示，
我们需要添加以下图表选项。
这将使鼠标悬停并选中该点时显示工具提示

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', {
  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.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'{
软件包：['corechart']
}).然后（函数（）{
变量选项={
标题:"检票",，
宽度：1700，
身高：400，
条：{groupWidth:“90%”，
图例：“无”，
isStacked：是的，
hAxis:{minValue:0，maxValue:9}，
curveType:'函数'，
点数：10，
工具提示：{trigger:'both'}，
selectionMode:'多个'，
aggregationTarget:“无”
};
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=newgoogle.visualization.DataView（数据）；
view.setColumns（[0,1,1{
计算：'字符串化'，
资料来源专栏：1，
键入：“字符串”，
角色：“注释”
}]);
var chart=new google.visualization.AreaChart（$（“#chart_Line”）.get（0））；
google.visualization.events.addListener（图表'ready'，函数（）{
var行=[]；
data.getSortedRows（{column:0}）.forEach（函数（行）{
rows.push（{row:row，column:1}）；
});
图表.选举（行）；
});
图表绘制（视图、选项）；
});

非常感谢，它的工作原理与代码片段类似，但没有像您一样显示数字。domy eng非常糟糕。。运行您的代码片段，您将在点上方看到一个蓝色数字。。在我的代码中，我看不到它们是的，请确保您正在使用数据视图绘制图表，而不是数据表（必须离开，一小时后回来）当我绘制图表时，它没有显示任何内容，图表已被删除。抱歉！我的代码中有一个错误，在创建数据视图时需要使用new
关键字，这里-->new google.visualization.DataView（data）