如何在图表中添加超链接 [英] How to add hyperlink in chart

问题描述

我想在图表图表上创建超链接，使用json从数据库中获取值并在图形中显示。我只是创建从数据库中获取数据的图形，但是当列点击它重定向时我无法创建超链接到另一页。 Plz帮我解决这个问题



这是我的代码：

    cshtml页面 
< script type =   text / javascript src =   https://www.google.com/jsapi>< /脚本> 
 
 @section脚本{
 
< script type =  文本/ JavaScript的> 
 
 
 
 $（ document ）。ready（ function （）{
  //  在此处加载数据 
  var  chartData =  null ; 
 $ .ajax（{
 url：'  / GoogleChart / GetSalesData'，
类型：'  GET'，
 dataType：'  json' ，
数据：' '，
成功： function （d）{
 chartData = d; 
}，
错误： function （）{
 alert（'' 错误！'）; 
} 
}）。done（ function （）{
 drawChart（chartData）; 
}）; 
}）; 
 
  function  drawChart（d）{
  var  chartData = d ; 
  var  data =  null ; 
 data = google.visualization.arrayToDataTable（chartData）; 
 
  var  view =  new  google.visualization。数据视图（数据）; 
 view.setColumns（[ 0 ，{
 type：'  number'，
 label：data.getColumnLabel（ 0 ），
 calc： function （）{ return   0 ;} 
}，{
类型：'  number'，
 label：data。 getColumnLabel（ 1 ），
 
 calc： function （）{返回  0 ;} 
 
}，{
类型：  number'，
 label：data.getColumnLabel（ 2 ），
 calc ： function （）{ return   0 ; } 
}，{
类型：'  number'，
 label：data.getColumnLabel（ 3 ），
 
 calc： function （） {返回  0 ; } 
}]）; 
 
  var  chart =  new  google.visualization.ColumnChart（ document  .getElementById（'  visualization'））; 
  var  options = {
 title：' '，
 legend：'  bottom'，
 curveType：'  function'，
 pointSize： 7 ，
 dataOpacity： 5 。 3 ，
 
 
 hAxis：{
 title：'  Year'，
格式：' ＃' 
}，
 vAxis：{
 minValue： 0 ，
 maxValue： 1000000 ，
 title：'  welcome' 
}，
 chartArea：{
 left： 100 ，top： 50 ，width：'  70％'，height：'  50％'， 
}，
动画：{
持续时间： 1000  
} 
}; 
 
  var  runFirstTime = google.visualization.events.addListener（chart，'  ready'， function （）
 {
 google.visualization.events.removeListener （runFirstTime）; 
 chart.draw（data，options）; 
 
}）; 
 
 chart.draw（查看，选项）; 
} 
 google.load（'  visual'，'  1'，{packages：['  corechart']}）; 
< / script> 
} 

   控制器 
 
  public  JsonResult GetSalesData（）
 {
 List< salesdata> sd =  new  List< salesdata>（）; 
 使用（MyDatabaseEntities dc =  new  MyDatabaseEntities（））
 {
 sd = dc.SalesDatas.OrderBy（a = >  a.Year）.ToList（）; 
} 
 
  var  chartData =  new   object  [sd.Count +  1 ]; 
 chartData [ 0 ] =  new   object  [] {
  年，
   Electronics，
   Book and Media，
   Homee And Kitchen 
}; 
  int  j =  0 ; 
  foreach （ var  i  in  sd）
 {
 j ++; 
 chartData [j] =  new   object  [] {i.Year，i.Electronics， i.BookAndMedia，i.HomeAndKitchen}; 
} 
 
  return   new  JsonResult {Data = chartData，JsonRequestBehavior = JsonRequestBehavior.AllowGet}; 
} < /   salesdata  >  < /   salesdata  >  

解决方案

（ document ）。ready（ function （）{
// 在此处加载数据
var chartData = null ;

.ajax （{
url：' / GoogleChart / GetSalesData'，
type：< span class =code-string>' GET'，
dataType：' < span class =code-string> json'，
data：' '，
成功： function （d）{
chartData = d;
}，
错误： function （）{
alert（'' 错误！'）;
}
}）。done（ function （）{
drawChart（chartData）;
}）;
}）;

function drawChart（d）{
var chartData = d ;
var data = null ;
data = google.visualization.arrayToDataTable（chartData）;

var view = new google.visualization。数据视图（数据）;
view.setColumns（[ 0 ，{
type：' number'，
label：data.getColumnLabel（ 0 ），
calc： function （）{ return 0 ;}
}，{
类型：' number'，
label：data。 getColumnLabel（ 1 ），

calc： function （）{返回 0 ;}

}，{
类型： number'，
label：data.getColumnLabel（ 2 ），
calc ： function （）{ return 0 ; }
}，{
类型：' number'，
label：data.getColumnLabel（ 3 ），

calc： function （） {返回 0 ; }
}]）;

var chart = new google.visualization.ColumnChart（ document .getElementById（' visualization'））;
var options = {
title：' '，
legend：' bottom'，
curveType：' function'，
pointSize： 7 ，
dataOpacity： 5 。 3 ，


hAxis：{
title：' Year'，
格式：' ＃'
}，
vAxis：{
minValue： 0 ，
maxValue： 1000000 ，
title：' welcome'
}，
chartArea：{
left： 100 ，top： 50 ，width：' 70％'，height：' 50％'，
}，
动画：{
持续时间： 1000
}
};

var runFirstTime = google.visualization.events.addListener（chart，' ready'， function （）
{
google.visualization.events.removeListener （runFirstTime）;
chart.draw（data，options）;

}）;

chart.draw（查看，选项）;
}
google.load（' visual'，' 1'，{packages：[' corechart']}）;
< / script>
}

   控制器 
 
  public  JsonResult GetSalesData（）
 {
 List< salesdata> sd =  new  List< salesdata>（）; 
 使用（MyDatabaseEntities dc =  new  MyDatabaseEntities（））
 {
 sd = dc.SalesDatas.OrderBy（a = >  a.Year）.ToList（）; 
} 
 
  var  chartData =  new   object  [sd.Count +  1 ]; 
 chartData [ 0 ] =  new   object  [] {
  年，
   Electronics，
   Book and Media，
   Homee And Kitchen 
}; 
  int  j =  0 ; 
  foreach （ var  i  in  sd）
 {
 j ++; 
 chartData [j] =  new   object  [] {i.Year，i.Electronics， i.BookAndMedia，i.HomeAndKitchen}; 
} 
 
  return   new  JsonResult {Data = chartData，JsonRequestBehavior = JsonRequestBehavior.AllowGet}; 
} < /   salesdata  >  < /   salesdata  >  

I want to create hyperlink on a graph chart by using json which fetch value from database and display in graph.I just create the graph which fetch the data from database but i m not able to create a hyperlink whenever a column click it redirect to another page. Plz help me to solve this

Here is my COde:

cshtml page
<script type="text/javascript" src="https://www.google.com/jsapi"></script>

            @section Scripts{

    <script type="text/javascript">
      
       

                $(document).ready(function () {
                    //Load Data Here
                    var chartData = null;
                    $.ajax({
                        url: '/GoogleChart/GetSalesData',
                        type: 'GET',
                        dataType: 'json',
                        data: '',
                        success: function (d) {
                            chartData = d;
                        },
                        error: function () {
                            alert('Error!');
                        }
                    }).done(function () {
                        drawChart(chartData);
                    });
                });
 
    function drawChart(d) {
        var chartData = d;
        var data = null;
        data = google.visualization.arrayToDataTable(chartData);
 
        var view = new google.visualization.DataView(data);
        view.setColumns([0, {
            type: 'number',
            label: data.getColumnLabel(0),
            calc: function () { return 0; }
        }, {
            type: 'number',
            label: data.getColumnLabel(1),
                
            calc: function () { return 0; }
            
        }, {
            type: 'number',
            label: data.getColumnLabel(2) ,
            calc: function () { return 0; }
        }, {
            type: 'number',
            label: data.getColumnLabel(3),

            calc: function () { return 0; }
        }]);
 
        var chart = new google.visualization.ColumnChart(document.getElementById('visualization'));
        var options = {
            title: '',
            legend: 'bottom',
            curveType: 'function',
            pointSize: 7,
            dataOpacity: 5.3,
           

            hAxis: {
                title: 'Year',
                format: '#'
            },
            vAxis: {
                minValue: 0,
                maxValue: 1000000,
                title: 'welcome'
            },
            chartArea: {
                left:100, top: 50, width:'70%', height: '50%' ,
            },
            animation: {
                duration: 1000
            }
        };
 
        var runFirstTime = google.visualization.events.addListener(chart, 'ready', function ()
        {
            google.visualization.events.removeListener(runFirstTime);
            chart.draw(data, options);
            
        });
 
        chart.draw(view, options);
    }
    google.load('visualization', '1', { packages: ['corechart'] });
 </script>
    }

Controller

 public JsonResult GetSalesData()
        {
            List<salesdata> sd = new List<salesdata>();
            using (MyDatabaseEntities dc = new MyDatabaseEntities())
            {
                sd = dc.SalesDatas.OrderBy(a => a.Year).ToList();
            }

            var chartData = new object[sd.Count + 1];
            chartData[0] = new object[]{
                    "Year",
                    "Electronics",
                    "Book And Media",
                    "Homee And Kitchen"
                };
            int j = 0;
            foreach (var i in sd)
            {
                j++;
                chartData[j] = new object[] { i.Year, i.Electronics, i.BookAndMedia, i.HomeAndKitchen };
            }

            return new JsonResult { Data = chartData, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
        }</salesdata></salesdata>

解决方案

(document).ready(function () { //Load Data Here var chartData = null;

.ajax({ url: '/GoogleChart/GetSalesData', type: 'GET', dataType: 'json', data: '', success: function (d) { chartData = d; }, error: function () { alert('Error!'); } }).done(function () { drawChart(chartData); }); }); function drawChart(d) { var chartData = d; var data = null; data = google.visualization.arrayToDataTable(chartData); var view = new google.visualization.DataView(data); view.setColumns([0, { type: 'number', label: data.getColumnLabel(0), calc: function () { return 0; } }, { type: 'number', label: data.getColumnLabel(1), calc: function () { return 0; } }, { type: 'number', label: data.getColumnLabel(2) , calc: function () { return 0; } }, { type: 'number', label: data.getColumnLabel(3), calc: function () { return 0; } }]); var chart = new google.visualization.ColumnChart(document.getElementById('visualization')); var options = { title: '', legend: 'bottom', curveType: 'function', pointSize: 7, dataOpacity: 5.3, hAxis: { title: 'Year', format: '#' }, vAxis: { minValue: 0, maxValue: 1000000, title: 'welcome' }, chartArea: { left:100, top: 50, width:'70%', height: '50%' , }, animation: { duration: 1000 } }; var runFirstTime = google.visualization.events.addListener(chart, 'ready', function () { google.visualization.events.removeListener(runFirstTime); chart.draw(data, options); }); chart.draw(view, options); } google.load('visualization', '1', { packages: ['corechart'] }); </script> }

Controller

 public JsonResult GetSalesData()
        {
            List<salesdata> sd = new List<salesdata>();
            using (MyDatabaseEntities dc = new MyDatabaseEntities())
            {
                sd = dc.SalesDatas.OrderBy(a => a.Year).ToList();
            }

            var chartData = new object[sd.Count + 1];
            chartData[0] = new object[]{
                    "Year",
                    "Electronics",
                    "Book And Media",
                    "Homee And Kitchen"
                };
            int j = 0;
            foreach (var i in sd)
            {
                j++;
                chartData[j] = new object[] { i.Year, i.Electronics, i.BookAndMedia, i.HomeAndKitchen };
            }

            return new JsonResult { Data = chartData, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
        }</salesdata></salesdata>

这篇关于如何在图表中添加超链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！