-1
私は、私のWebサービスから生成されたテーブルデータを（2つのフィールドの製品名と数量を持つ）グラフに表示したいと考えています。チャートは間違っています。 テーブルが正しく動作していて、エラーのあるチャートのみです。chart.jsがテーブルデータを読み込まない - 解決済み
マイFrontEndの
var app = angular.module('appCompras', []);
app.controller('comprasCtrl', function ($scope, $http) {
var link = "http://localhost:58593/WebService.asmx"
var url = link + "/" + "ListarQuinzeCompras";
$http.get(url).success(function (data) {
$scope.names = data;
var randomScalingFactor = function() { return Math.round(Math.random() * 100) };
var barChartData = {
labels: [$scope.names.Nome],
datasets: [
{
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data: [$scope.names.Quantidade]
},
]
}
var ctx = document.getElementById("canvas").getContext("2d");
window.myBar = new Chart(ctx).Bar(barChartData, {
responsive: true
});
})
});
マイWebServiceの
[WebMethod]
[ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Json)]
public void ListarQuinzeCompras()
{
var SQL = new LibOrgm.SQL();
var cn = new ADODB.Connection();
try
{
Context.Response.Clear();
Context.Response.ContentType = "application/json";
SQL.AbrirConexao(cn);
var retorno = ComprasFO.ListarUltimasQuinzeCompras(cn);
Context.Response.Write(SerializerFO.Serializador(retorno));
}
catch (Exception Ex)
{
Context.Response.Write(Ex);
}
finally
{
SQL.FecharConexao(cn);
}
}
マイDATAACCESSクラス
using ADODB;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using LibOrgm;
using System.Globalization;
namespace WebApplication1.BI.Graficos.Compras
{
public class ComprasDA
{
public static ComprasBO GetCompras(int PkCompras, Connection cn)
{
var Compra = new ComprasBO();
var RsCompra = new ADODB.Recordset();
try
{
RsCompra.Open(String.Format("select * from Compras where PkCompras = {0}", PkCompras), cn, CursorTypeEnum.adOpenStatic, LockTypeEnum.adLockReadOnly);
if (!RsCompra.EOF)
{
Compra.PkCompras = int.Parse(RsCompra.Fields["PkCompras"].Value.ToString());
Compra.IdProduto = int.Parse(RsCompra.Fields["IdProduto"].Value.ToString());
Compra.Nome = RsCompra.Fields["Nome"].Value.ToString();
Compra.Quantidade = int.Parse(RsCompra.Fields["Quantidade"].Value.ToString());
Compra.DataCompra = DateTime.Parse(RsCompra.Fields["DataCompra"].Value.ToString());
//DateTime.ParseExact(RsCompra.Fields["DataCompra"].Value.ToString(), "ddMMyyyy", CultureInfo.InvariantCulture);
}
}
catch (Exception)
{
throw;
}
return Compra;
}
public static ComprasBO[] ListUltimos15(Connection cn)
{
var RsCompras = new Recordset();
try
{
RsCompras.Open("SELECT TOP 15 PkCompras FROM Compras ORDER BY PkCompras DESC", cn, CursorTypeEnum.adOpenStatic, LockTypeEnum.adLockReadOnly);
if (!RsCompras.EOF)
{
var ListaCompras = new ComprasBO[RsCompras.RecordCount];
for (int i = 0; i < RsCompras.RecordCount; i++)
{
ListaCompras[i] = GetCompras(int.Parse(RsCompras.Fields[0].Value.ToString()), cn);
RsCompras.MoveNext();
}
RsCompras.Close();
return ListaCompras;
}
}
catch (Exception)
{
throw;
}
return new ComprasBO[0];
}
}
}
私のクラスComprasBO
public class ComprasBO
{
public int PkCompras { get; set; }
public int IdProduto { get; set; }
public string Nome { get; set; }
public int Quantidade { get; set; }
public DateTime DataCompra { get; set; }
}
私関数オブジェクト
public static ComprasBO[] ListarUltimasQuinzeCompras(ADODB.Connection cn)
{
try
{
return ComprasDA.ListUltimos15(cn);
}
catch (Exception)
{
throw;
}
}
ソリューション
var app = angular.module('appCompras', []);
app.controller('comprasCtrl', function ($scope, $http) {
var link = "http://localhost:58593/WebService.asmx"
var url = link + "/" + "ListarQuinzeCompras";
$http.get(url).success(function (data) {
$scope.names = data;
var randomScalingFactor = function() { return Math.round(Math.random() * 100) };
Array.prototype.carregaDados = function (dados) {
return this.map(function (obj) {
return obj[dados];
});
};
var barChartData = {
labels: data.carregaDados('Nome'),
datasets: [
{
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data: data.carregaDados('Quantidade')
},
]
}
var ctx = document.getElementById("canvas").getContext("2d");
window.myBar = new Chart(ctx).Bar(barChartData, {
responsive: true
});
})
}）;
あなたのタイトルから「解決済み」を削除し、見つけた解決策を適切な回答として投稿してください。 – usr2564301