Jquery 海图给了我黑色的图像

Jquery 海图给了我黑色的图像,jquery,highcharts,Jquery,Highcharts,我使用Highcharts库开发图表,第一次运行时效果很好,但当我回来运行应用程序时,我发现所有图表都是黑色图像,我不知道为什么 我的jsp: <html> <head> <script src="<c:url value='/assets/js/jquery.js' />"></script> <script src="<c:url value='/assets/js/highstock.js' />"><

我使用Highcharts库开发图表,第一次运行时效果很好,但当我回来运行应用程序时,我发现所有图表都是黑色图像,我不知道为什么

我的jsp:

<html>
<head>
<script src="<c:url value='/assets/js/jquery.js' />"></script>
<script src="<c:url value='/assets/js/highstock.js' />"></script>
<script src="<c:url value='/assets/js/highcharts.js' />"></script>
<script src="<c:url value='/assets/js/highmaps.js' />"></script>
<script src="<c:url value='/assets/js/exporting.js' />"></script>
<script src="http://highcharts.github.io/export-csv/export-csv.js"> 
</head>
<body>
<div id="impressionChart" style="height: 400px"></div>

<script type="text/javascript">
        var campaignId = $('#campaignId').val();
        var processed_json = [];
        var parsedJson;
        var myArray = [];
        var url = "/ADVoice/advertiser/campaign/performance/campaignImpression/"
                + campaignId;
        $
                .ajax({
                    url : url,
                    datatype : "json",
                    type : "GET",
                    async : false,
                    success : function(data) {
                        // alert(data);
                        parsedJson = JSON.stringify(data);
                        alert(parsedJson);
                        var jsonArray = JSON.parse(parsedJson);
                        // alert(jsonArray['campaign_data'].length);
                        for (i = 0; i < jsonArray['campaign_data'].length; i++) {
                            myArray[i] = [];
                            myArray[i][0] = Date
                                    .parse(jsonArray['campaign_data'][i].key);
                            myArray[i][1] = parseInt(jsonArray['campaign_data'][i].value);

                        }
                        // alert(myArray);
                    },
                    error : function() {
                        alert("error");
                    }
                });
        // draw chart
        Highcharts.setOptions({
            global : {
                useUTC : false
            }
        });
        $('#impressionChart').highcharts({
            chart : {
                type : "column"
            },
            title : {
                text : "Campaign Impression"
            },
            xAxis : {
                type : 'datetime',
                labels : {
                    formatter : function() {
                        return Highcharts.dateFormat('%a %d %b', this.value);
                    }
                }
            },
            yAxis : {
                title : {
                    text : "Number of impressions"
                }
            },
            series : [ {
                name : "No.Impressions:",
                data : myArray,
                pointStart : Date.parse(myArray[0][0])
            // pointInterval: 24 * 3600 * 1000 // one day
            } ],
            exporting : {
                csv : {
                    dateFormat : '%Y-%m-%d'
                }
            }
        });
    </script>
</body>    
</html>

var-activitid=$('#activitid').val();
var-processed_json=[];
var-parsedJson;
var myArray=[];
var url=“/ADVoice/advertiser/campaign/performance/campaignImpression/”
+运动ID;
$
.阿贾克斯({
url:url,
数据类型:“json”,
键入:“获取”,
async:false,
成功:功能(数据){
//警报(数据);
parsedJson=JSON.stringify(数据);
警报(parsedJson);
var jsonArray=JSON.parse(parsedJson);
//警报(jsonArray['campaign_data'].长度);
对于(i=0;i
正如您将在本文中看到的,我用您得到的结果“替换”了ajax函数

我认为您的Ajax请求是可以的,因为您获得了这个结果,所以我无法在CodePen中完成。我对循环使用了与您完全相同的

关于控制台中的错误,这是非常明确的。它表示您调用HightCharts功能包含在highstock库中

<script src="<c:url value='/assets/js/jquery.js' />"></script>
<script src="<c:url value='/assets/js/highstock.js' />"></script>
<!-- script src="<c:url value='/assets/js/highcharts.js' />"></script -->
<script src="<c:url value='/assets/js/highmaps.js' />"></script>
<script src="<c:url value='/assets/js/exporting.js' />"></script>
<script src="http://highcharts.github.io/export-csv/export-csv.js"> 

只需如上注释highcharts.js。

正如您将在本文中看到的,我用您得到的结果“替换”了您的ajax函数

我认为您的Ajax请求是可以的,因为您获得了这个结果,所以我无法在CodePen中完成。我对循环使用了与您完全相同的

关于控制台中的错误,这是非常明确的。它表示您调用HightCharts功能包含在highstock库中

<script src="<c:url value='/assets/js/jquery.js' />"></script>
<script src="<c:url value='/assets/js/highstock.js' />"></script>
<!-- script src="<c:url value='/assets/js/highcharts.js' />"></script -->
<script src="<c:url value='/assets/js/highmaps.js' />"></script>
<script src="<c:url value='/assets/js/exporting.js' />"></script>
<script src="http://highcharts.github.io/export-csv/export-csv.js"> 


只需如上注释highcharts.js。

如果还有人对此有问题,我可以通过使用aRGB值指定图表的所有颜色来解决问题

例如,在ASP.NET中,此代码:

chart.SetSeries(new[]
    {
        new Series {
            Name = "Average",
            Data = GetAverageData(),
            Color = Color.Crimson
        },
        new Series {
            Name = "Order",
            Data = GetOrderData(),
            Color = Color.RoyalBlue
        }

    });
已转换为:

chart.SetSeries(new[]
    {
        new Series {
            Name = "Average",
            Data = GetAverageData(),
            Color = Color.FromArgb(255, 220, 20, 60)
        },
        new Series {
            Name = "Order",
            Data = GetOrderData(),
            Color = Color.FromArgb(255, 65, 105, 225)
        }
     });

如果有人对此仍有疑问,我可以通过使用aRGB值指定图表的所有颜色来解决问题

例如,在ASP.NET中,此代码:

chart.SetSeries(new[]
    {
        new Series {
            Name = "Average",
            Data = GetAverageData(),
            Color = Color.Crimson
        },
        new Series {
            Name = "Order",
            Data = GetOrderData(),
            Color = Color.RoyalBlue
        }

    });
已转换为:

chart.SetSeries(new[]
    {
        new Series {
            Name = "Average",
            Data = GetAverageData(),
            Color = Color.FromArgb(255, 220, 20, 60)
        },
        new Series {
            Name = "Order",
            Data = GetOrderData(),
            Color = Color.FromArgb(255, 65, 105, 225)
        }
     });

我用Highcharts-6.1.0面对这个问题

解决方案:-

  • 而不是从

    src="Scripts/Highcharts-6.1.0/code/js/highcharts-3d.js"
    
    进口自

    src="Scripts/Highcharts-6.1.0/code/highcharts-3d.js"**
    
  • 对于模块(导出js和export data.js),请执行以下操作


  • 我用Highcharts-6.1.0面对这个问题

    解决方案:-

  • 而不是从

    src="Scripts/Highcharts-6.1.0/code/js/highcharts-3d.js"
    
    进口自

    src="Scripts/Highcharts-6.1.0/code/highcharts-3d.js"**
    
  • 对于模块(导出js和export data.js),请执行以下操作


  • 在使用Highcharts的“css样式”版本时,我遇到了类似的问题。当我试着下载一张png格式的图表时,我看到了一张黑色的图片

    使用而不是修复我的问题。code.highcharts.com没有将此文件列在“样式按css标题”下,但它表示所有样式化版本相关的文件都在“/js/”文件夹下

    编辑:在highcharts的7.x版本之后,样式化版本与非样式化版本合并。以上链接是最新版本,因此可能无法解决7.x版本之前的问题。
    升级到最新版本并使用“chart.styledMode=true”为我解决了整个问题。

    在使用Highcharts的“css样式”版本时,我遇到了类似的问题。当我试着下载一张png格式的图表时,我看到了一张黑色的图片

    使用而不是修复我的问题。code.highcharts.com没有将此文件列在“样式按css标题”下,但它表示所有样式化版本相关的文件都在“/js/”文件夹下

    编辑:在highcharts的7.x版本之后,样式化版本与非样式化版本合并。以上链接是最新版本,因此可能无法解决7.x版本之前的问题。
    升级到最新版本并使用“chart.styledMode=true”为我解决了整个问题。

    问题在于css和js版本之间的差异。解决方案:

    1.从NuGet安装(highcharts.js)

    2.添加到视图中

        <link href="~/Scripts/highcharts/7.1.2/css/highcharts.css" rel="stylesheet" />`
    <script src="~/Scripts/highcharts/7.1.2/highcharts.js"></script>
        <script src="~/Scripts/highcharts/7.1.2/modules/exporting.js"></script>
        <script src="~/Scripts/highcharts/7.1.2/modules/export-data.js"></script>
        <script src="~/Scripts/highcharts/7.1.2/modules/accessibility.js"></script> 
    
    `
    
    问题在于css和js版本之间的差异。解决方案:

    1.从NuGet安装(highcharts.js)

    2.添加到视图中

        <link href="~/Scripts/highcharts/7.1.2/css/highcharts.css" rel="stylesheet" />`
    <script src="~/Scripts/highcharts/7.1.2/highcharts.js"></script>
        <script src="~/Scripts/highcharts/7.1.2/modules/exporting.js"></script>
        <script src="~/Scripts/highcharts/7.1.2/modules/export-data.js"></script>
        <script src="~/Scripts/highcharts/7.1.2/modules/accessibility.js"></script> 
    
    `
    
    您是否可以通过发布您从中获得的json来编辑您的问题