Question

我是MVC 5的新手，对创建图表并不太了解。我需要创建一个图表，它将显示表格中的四个值，如FormatName，Month，SuccessCount，FailCount。我想在每个格式的月份基础上显示成功和失败计数。格式是客户名称。我试过几个网站，但不知道如何显示这三个值月份FormatName SuccessCount FailedCount
Jan HPCL 20 32
2月FG 23 0
Mar abcd 13 34
4月测试12 23

上面是我要在图表上显示的表格。遗憾的是我无法添加
图像，因为它不允许在stackoverflow上。
我用下面的方法来显示图表中的数据。
`public List BindFormatByMonth（字符串状态）
        {             DataTable dt1 = new DataTable（）;
            DataTable dt2 = new DataTable（）;
            dt1 = PBMSCommon.Database.ExecuteDataSet（＆＃34; usp_sel_DedupeDetails＆＃34;，
status）.Tables [0]; //成功记录
            列出ochartmodel = new List（）;

        foreach (DataRow row in dt1.Rows)
        { 
            FormatStatus omodel = new FormatStatus();
            omodel.FormatName = Convert.ToString(row["NVFormatCode"]); 
            omodel.month = Convert.ToString(row["Month"]);
            omodel.successCount = Convert.ToInt32(row["Status"]); 
            ochartmodel.Add(omodel);
        }`

任何帮助将不胜感激。

Pooja

Answer 1

您可以根据需要使用垂直条形图。我建议你使用chart.js。它具有响应性和用户友好性。

所以我在这里添加了一个小提琴手！它会对你充分使用！

Fiddle

HTML：

<canvas id="myChart" width="400" height="400"></canvas>

Javascript：

var ctx = document.getElementById("myChart").getContext("2d");

var data = {
  labels: ["Jan", "Feb", "Mar"],
  datasets: [{
    label: "HPCL",
    backgroundColor: "skyblue",
    data: [20, 32, 12]
  }, {
    label: "FG ",
    backgroundColor: "maroon",
    data: [23, 10, 15]
  }, {
    label: "abcd",
    backgroundColor: "green",
    data: [13, 34, 16]
  }, {
    label: "test",
    backgroundColor: "violet",
    data: [12, 23, 16]
  }]
};

var myBarChart = new Chart(ctx, {
  type: 'bar',
  data: data,
  options: {
    barValueSpacing: 20,
    scales: {
      yAxes: [{
        ticks: {
          min: 0,
        }
      }]
    }
  }
});

Fiddle

如何在MVC中创建图表有三个要显示的值

1 个答案: