Jquery 海图给了我黑色的图像
我使用Highcharts库开发图表,第一次运行时效果很好,但当我回来运行应用程序时,我发现所有图表都是黑色图像,我不知道为什么 我的jsp: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' />"><
<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来编辑您的问题