从javascript加载asp:图表

时间:2016-03-14 08:36:48

标签: javascript c# asp.net-mvc

以下逻辑运行网页上载并调用部分视图以在图表中显示数据:

<img src='@Url.Action("_GetChartDetails", "Chart", new { chartType = "Won" })' id="chartid" />

这有效。

但是当我从javascript中执行此操作时,图像为空白。任何人都可以建议我做错了吗?

$http.get("http://localhost:51666/Chart/_GetChartDetails?chartType=Loss")
.success(function (response) {

    alert(response);

    //$("#chartid").attr("src", "data:image/png;base64," + response);

    document.getElementById("chartid").src = response;

}).error(function (data, status, headers, config) {

    alert(data);

});

2 个答案:

答案 0 :(得分:1)

除了手动执行$http.get生成图表之外,您不必将图像源更改为指向局部视图并通过所需参数(赢或输):

$scope.GetChartDetails = function (chartType) {

    var img = document.createElement('img');

    img.src = "/Chart/_GetChartDetails?chartType=" + chartType;

    var node = document.getElementById('chart');

    while (node.hasChildNodes()) {
        node.removeChild(node.lastChild);
    }

    document.getElementById('chart').appendChild(img);

};

答案 1 :(得分:0)

检查图像是否定义正确:

.success(function (response) {
 var image = document.createElement('img');
 image.onload = function () {
  //if it's correct created you can open it in console (click)and see what your server returns, it may be the correct response but you may have issues with CSS.
  console.log(image);
 };
 image.src = response;
}

控制台可点击图片: enter image description here