jqPlot 堆积条形图呈现图表外
jqPlot Stacked Bar Chart rendered off-chart
我正在使用 jqPlot 根据来自网络方法的数据生成堆积条形图。
图表呈现成功,但为空白。当我将 pointLabels 设置为 'true' 时,它们杂乱无章地出现在图表的左侧。我猜堆叠条形图也被渲染为图表外,但我不明白为什么。
有人可以解释一下如何解决这个问题吗?
这是网络方法:
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public List<dataPoint> getPartnerOrderVolumes()
{
List<dataPoint> p = new List<dataPoint>();
DataTable dt = new DataTable();
chart jep = new chart(5);
foreach (chartData cd in jep.lstChartData)
{
dt = cd.GetData();
}
if (dt.Rows.Count > 0)
{
foreach (DataRow row in dt.Rows)
{
dataPoint dp = new dataPoint();
dp.x1Value = row[2].ToString();
dp.y1Value = row[3].ToString();
dp.y2Value = row[4].ToString();
p.Add(dp);
}
}
return p;
}
这里是web方法使用的数据点class:
public class dataPoint
{
public string x1Value { get; set; }
public string y1Value { get; set; }
public string x2Value { get; set; }
public string y2Value { get; set; }
public string x3Value { get; set; }
public string y3Value { get; set; }
public string x4Value { get; set; }
public string y4Value { get; set; }
}
这是它从数据库中提取数据的示例:
这里是 javascript:
function OnSuccess_(response) {
var aData = response.d;
var types = [];
var arrType = [];
var arr = [];
// find distinct types (partners)
for (i = 0; i < aData.length; i++) {
if (types.indexOf(aData[i].y2Value) === -1) {
types.push(aData[i].y2Value);
}
}
// generate array containing arrays of each type
for (i = 0; i < types.length; i++)
{
var filtered = aData.filter(function (el) {
return el.y2Value == types[i];
});
arrType.length = 0;
$.map(filtered, function (item, index) {
var j = [item.x1Value, item.y1Value];
arrType.push(j);
});
arr.push(arrType);
}
$.jqplot.config.enablePlugins = true;
plot1 = $.jqplot('chart5', arr, {
title: 'Partner Order Volumes',
// Only animate if we're not using excanvas (not in IE 7 or IE 8)..
animate: !$.jqplot.use_excanvas,
stackSeries: true,
seriesColors: ['#F7911E', '#32AB52', '#FFE200', '#29303A'],
seriesDefaults: {
shadow: true,
pointLabels: { show: true },
renderer: $.jqplot.BarRenderer,
rendererOptions: {
varyBarColor: true,
animation: { speed: 2000 },
barDirection: 'vertical'
}
},
legend: {
show: true,
location: 'e',
placement: 'outside',
labels: types
},
axesDefaults: {
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: { fontSize: '10pt', textColor: '#000000' }
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
tickOptions: { angle: -30 }
},
yaxis: {
label: 'Count of New Orders',
min: 0,
max: 200
}
},
highlighter: { show: false }
});
}
function OnErrorCall_(response) {
alert("Whoops something went wrong!");
}
});
我认为有两件事共同导致了您的问题:
第一:没有正确复制数组。将数据拆分为类型时,您正在使用 arrType.length = 0
重置临时数组。这会重置数组长度,但不会创建新数组。这意味着实际上您推送到 arr
的所有数组引用都指向同一个数组 - 最后处理的类型的最后数据。您需要将 arrType.length = 0;
替换为:
arrType = [];
或者,保留 .length = 0
并在将数组推送到 arr
时使用以下内容:
arr.push(arrType.slice());
其次:使用了不正确的渲染器。 xaxis
的渲染器应该是 $.jqplot.DateAxisRenderer
,而不是您当前使用的 $.jqplot.CategoryAxisRenderer
。日期渲染器也是一个插件,因此您需要确保包含以下内容(显然路径已根据您的设置进行适当调整):
<script type="text/javascript" src="plugins/jqplot.dateAxisRenderer.js"></script>
您希望 xaxis
上的 tickOptions
类似于:
tickOptions: { formatString: '%b %#d', angle: -30 }
通过这些调整,以及从您的 C# 代码派生的一些示例数据,JS 成功生成了以下内容:
希望能解决问题![=25=]
我正在使用 jqPlot 根据来自网络方法的数据生成堆积条形图。
图表呈现成功,但为空白。当我将 pointLabels 设置为 'true' 时,它们杂乱无章地出现在图表的左侧。我猜堆叠条形图也被渲染为图表外,但我不明白为什么。
有人可以解释一下如何解决这个问题吗?
这是网络方法:
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public List<dataPoint> getPartnerOrderVolumes()
{
List<dataPoint> p = new List<dataPoint>();
DataTable dt = new DataTable();
chart jep = new chart(5);
foreach (chartData cd in jep.lstChartData)
{
dt = cd.GetData();
}
if (dt.Rows.Count > 0)
{
foreach (DataRow row in dt.Rows)
{
dataPoint dp = new dataPoint();
dp.x1Value = row[2].ToString();
dp.y1Value = row[3].ToString();
dp.y2Value = row[4].ToString();
p.Add(dp);
}
}
return p;
}
这里是web方法使用的数据点class:
public class dataPoint
{
public string x1Value { get; set; }
public string y1Value { get; set; }
public string x2Value { get; set; }
public string y2Value { get; set; }
public string x3Value { get; set; }
public string y3Value { get; set; }
public string x4Value { get; set; }
public string y4Value { get; set; }
}
这是它从数据库中提取数据的示例:
这里是 javascript:
function OnSuccess_(response) {
var aData = response.d;
var types = [];
var arrType = [];
var arr = [];
// find distinct types (partners)
for (i = 0; i < aData.length; i++) {
if (types.indexOf(aData[i].y2Value) === -1) {
types.push(aData[i].y2Value);
}
}
// generate array containing arrays of each type
for (i = 0; i < types.length; i++)
{
var filtered = aData.filter(function (el) {
return el.y2Value == types[i];
});
arrType.length = 0;
$.map(filtered, function (item, index) {
var j = [item.x1Value, item.y1Value];
arrType.push(j);
});
arr.push(arrType);
}
$.jqplot.config.enablePlugins = true;
plot1 = $.jqplot('chart5', arr, {
title: 'Partner Order Volumes',
// Only animate if we're not using excanvas (not in IE 7 or IE 8)..
animate: !$.jqplot.use_excanvas,
stackSeries: true,
seriesColors: ['#F7911E', '#32AB52', '#FFE200', '#29303A'],
seriesDefaults: {
shadow: true,
pointLabels: { show: true },
renderer: $.jqplot.BarRenderer,
rendererOptions: {
varyBarColor: true,
animation: { speed: 2000 },
barDirection: 'vertical'
}
},
legend: {
show: true,
location: 'e',
placement: 'outside',
labels: types
},
axesDefaults: {
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: { fontSize: '10pt', textColor: '#000000' }
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
tickOptions: { angle: -30 }
},
yaxis: {
label: 'Count of New Orders',
min: 0,
max: 200
}
},
highlighter: { show: false }
});
}
function OnErrorCall_(response) {
alert("Whoops something went wrong!");
}
});
我认为有两件事共同导致了您的问题:
第一:没有正确复制数组。将数据拆分为类型时,您正在使用 arrType.length = 0
重置临时数组。这会重置数组长度,但不会创建新数组。这意味着实际上您推送到 arr
的所有数组引用都指向同一个数组 - 最后处理的类型的最后数据。您需要将 arrType.length = 0;
替换为:
arrType = [];
或者,保留 .length = 0
并在将数组推送到 arr
时使用以下内容:
arr.push(arrType.slice());
其次:使用了不正确的渲染器。 xaxis
的渲染器应该是 $.jqplot.DateAxisRenderer
,而不是您当前使用的 $.jqplot.CategoryAxisRenderer
。日期渲染器也是一个插件,因此您需要确保包含以下内容(显然路径已根据您的设置进行适当调整):
<script type="text/javascript" src="plugins/jqplot.dateAxisRenderer.js"></script>
您希望 xaxis
上的 tickOptions
类似于:
tickOptions: { formatString: '%b %#d', angle: -30 }
通过这些调整,以及从您的 C# 代码派生的一些示例数据,JS 成功生成了以下内容:
希望能解决问题![=25=]