使用MVC和chart.js进行图表控制 [英] Chart control using MVC and chart.js

问题描述

我在我的MVC应用程序仪表板中使用chart.js显示图表。

现在我通过jquery绑定数据。是否有可能从控制器绑定数据。

  function  IncomeExpenseChart（aData，from）{
 
  if （from ==   s）{
 $（' ＃incomeExpense strong'）。html （ 收入 - 费用： + start +    -  + end）; 
} 
  document  .getElementById（ 费用表）。innerHTML = ' '; 
  document  .getElementById（  expensechart).innerHTML = ' '; 
 
 $（' 。netincome'）。html（aData.Net） ; 
 $（' 。expense'）。html（aData.Expense）; 
 $（' 。income'）。html（aData.Income）; 
 
  var  aLabels = aData.data.Label; 
  var  aDatasets1 = aData.data.X; 
  var  aDatasets2 = aData.data.Y; 
  //   var aDatasets3 = aData [3];  
  //   var aDatasets4 = aData [4];  
 
  //  使用jQuery获取上下文 - 使用jQuery的.get（）方法。 
  var  salesChartCanvas = $（ ＃salesChart）。get（ 0 ）。getContext（  2d）; 
  //  这将获得jQuery集合中第一个返回的节点。 
  var  salesChart =  new 图表（salesChartCanvas）; 
 
  var  data = {
 labels：aLabels，
数据集：[
 {
 label： 收入，
 fillColor：   rgb（210,214,222），
 strokeColor：  rgb（210,214,222），
 pointColor：  rgb（210,214,222），
 pointStrokeColor：  ＃c1c7d1，
 pointHighlightFill：  #ffff，
 pointHighlightStroke：  rgb（220,220,220），
 data：aDatasets1 
}，
 {
 label： 费用，
 fillColor：  rgba（60,141,188,0.9），
 strokeColor：  rgba（60,141,188,0.8），
 pointColor： ＃3b8bba，
 pointStrokeColor：  rgba（60,141,188,1），
 pointHighlightFill：  #ffff ，
 pointHighlightStroke：  rgba（60,141,188,1），
数据：aDatasets2 
} 
] 
}; 
 
 
  //  创建折线图 
 salesChart.Line（data，{
 responsive： true ，
 animation： true  ，
 barValueSpacing： 5 ，
 barDatasetSpacing： 1 ，
 tooltipFillColor ：  rgba（0,0,0,0.8），
 multiTooltipTemplate：   - ，
 pointDot： false ，
  //  数字 - 每个点的半径（以像素为单位） 
 pointDotRadius ： 4 ，
 showScale： true ，
  //  < span class =code-comment> Boolean  - 网格线是否显示在图表中 
 scaleShowGridLines： false ，
 < span class =code-comment> //   String  - 网格线的颜色 
 scaleGridLineColor：  rgba（0,0,0，.05），
  //  数字 - 网格线的宽度 
 scaleGridLineWidth： 1 ，
  //   Boolean  - 是否显示水平线（X轴除外） 
 scaleShowHorizo​​ntalLines：< span class =code-keyword> true ，
  //   Boolean  - 是否显示垂直线（Y轴除外） 
 scaleShowVerticalLines： true ，
}）; 
 
 
  //   ------------ ---------------  
  //    - 结束月度销售额表 -   
  //   ----------- ----------------  
} 

我尝试了什么：



i看到一些mvc图表控件创建图表并将其转换为图像并推送到div。我想用chart.js做同样的事情

  //  将图表保存到MemoryStream  
  var  imgStream =  new  MemoryStream（）; 
 salesChart.SaveImage（imgStream，ChartImageFormat.Png）; 
 imgStream.Seek（ 0 ，SeekOrigin.Begin）; 
 
  //  将Stream的内容返回给客户 
  return 文件（imgStream，  image / png< /跨度>）; 
 

解决方案

（' ＃incomeExpense strong'）。html（ 收入 - 费用： + start + - + end）;
}
document .getElementById（ 费用表）。innerHTML = ' ';
document .getElementById（ expensechart).innerHTML = ' ';

（ ' 。netincome'）。html（aData.Net）;

< blockquote>（' 。expense'）。html（aData.Expense）;

I am using chart.js for display chart in my MVC application dashboard.
now i am binding data through jquery. Is there any possibility to bind data from controller.

function IncomeExpenseChart(aData, from) {

    if (from == "s") {
        $('#incomeExpense strong').html("Income-Expense: "+start+" - "+end);
    }
    document.getElementById("expensechart").innerHTML = ' ';
    document.getElementById("expensechart").innerHTML = '';

    $('.netincome').html(aData.Net);
    $('.expense').html(aData.Expense);
    $('.income').html(aData.Income);

    var aLabels = aData.data.Label;
    var aDatasets1 = aData.data.X;
    var aDatasets2 = aData.data.Y;
    //  var aDatasets3 = aData[3];
    //var aDatasets4 = aData[4];

    // Get context with jQuery - using jQuery's .get() method.
    var salesChartCanvas = $("#salesChart").get(0).getContext("2d");
    // This will get the first returned node in the jQuery collection.
    var salesChart = new Chart(salesChartCanvas);

    var data = {
        labels: aLabels,
        datasets: [
            {
                label: "Income",
                fillColor: "rgb(210, 214, 222)",
                strokeColor: "rgb(210, 214, 222)",
                pointColor: "rgb(210, 214, 222)",
                pointStrokeColor: "#c1c7d1",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgb(220,220,220)",
                data: aDatasets1
            },
        {
            label: "Expense",
            fillColor: "rgba(60,141,188,0.9)",
            strokeColor: "rgba(60,141,188,0.8)",
            pointColor: "#3b8bba",
            pointStrokeColor: "rgba(60,141,188,1)",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(60,141,188,1)",
            data: aDatasets2
        }
        ]
    };


    //Create the line chart
    salesChart.Line(data, {
        responsive: true,
        animation: true,
        barValueSpacing: 5,
        barDatasetSpacing: 1,
        tooltipFillColor: "rgba(0,0,0,0.8)",
        multiTooltipTemplate: " - ",
        pointDot: false,
        //Number - Radius of each point dot in pixels
        pointDotRadius: 4,
        showScale: true,
        //Boolean - Whether grid lines are shown across the chart
        scaleShowGridLines: false,
        //String - Colour of the grid lines
        scaleGridLineColor: "rgba(0,0,0,.05)",
        //Number - Width of the grid lines
        scaleGridLineWidth: 1,
        //Boolean - Whether to show horizontal lines (except X axis)
        scaleShowHorizontalLines: true,
        //Boolean - Whether to show vertical lines (except Y axis)
        scaleShowVerticalLines: true,
    });


    //---------------------------
    //- END MONTHLY SALES CHART -
    //---------------------------
}

What I have tried:

i saw some mvc chart controls which create chart and convert it to image and pushing to div. i want to make the same using chart.js

// Save the chart to a MemoryStream
  var imgStream = new MemoryStream();
  salesChart.SaveImage(imgStream, ChartImageFormat.Png);
  imgStream.Seek(0, SeekOrigin.Begin);

  // Return the contents of the Stream to the client
  return File(imgStream, "image/png");

解决方案

('#incomeExpense strong').html("Income-Expense: "+start+" - "+end); } document.getElementById("expensechart").innerHTML = ' '; document.getElementById("expensechart").innerHTML = '';

('.netincome').html(aData.Net);

('.expense').html(aData.Expense);

这篇关于使用MVC和chart.js进行图表控制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！