我在我的页面中使用了 jqPlot。我想使用 11 条形图，其中条形图显示为:
六图:用动态值显示"is"/“否”
五个图表:用动态值显示“优秀”/“良好”/“一般”/“差”/“非常差”
每个条形图都具有从数据库中获取的动态值。
C#代码:
[WebMethod, ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static void FetchGraphData(string questionId)
{
string stQuery = @"SELECT
SUM(RESPONSE2=0) AS OBJECTIVE_CLEAR_NO,
SUM(RESPONSE2=1) AS OBJECTIVE_CLEAR_YES,
SUM(RESPONSE3=0) AS ACTIVE_PARTICIPATION_NO,
SUM(RESPONSE3=1) AS ACTIVE_PARTICIPATION_YES,
SUM(RESPONSE4=0) AS QUESTIONS_ANSWERED_NO,
SUM(RESPONSE4=1) AS QUESTIONS_ANSWERED_YES,
SUM(RESPONSE5=0) AS SPEAKER_INTERACTIVE_NO,
SUM(RESPONSE5=1) AS SPEAKER_INTERACTIVE_YES,
SUM(RESPONSE6=0) AS SESSION_ON_TIME_NO,
SUM(RESPONSE6=1) AS SESSION_ON_TIME_YES,
SUM(RESPONSE14=0) AS SESSION_HELPFUL_NO,
SUM(RESPONSE14=1) AS SESSION_HELPFUL_YES,
SUM(RESPONSE7=1) AS OBJECTIVES_CLARIFIED_EXCELLENT,
SUM(RESPONSE7=2) AS OBJECTIVES_CLARIFIED_GOOD,
SUM(RESPONSE7=3) AS OBJECTIVES_CLARIFIED_AVERAGE,
SUM(RESPONSE7=4) AS OBJECTIVES_CLARIFIED_POOR,
SUM(RESPONSE7=5) AS OBJECTIVES_CLARIFIED_VERY_POOR,
SUM(RESPONSE8=1) AS CONTENT_CLEAR_EXCELLENT,
SUM(RESPONSE8=2) AS CONTENT_CLEAR_GOOD,
SUM(RESPONSE8=3) AS CONTENT_CLEAR_AVERAGE,
SUM(RESPONSE8=4) AS CONTENT_CLEAR_POOR,
SUM(RESPONSE8=5) AS CONTENT_CLEAR_VERY_POOR,
SUM(RESPONSE9=1) AS SPEAKER_LEVEL_INTERACTION_EXCELLENT,
SUM(RESPONSE9=2) AS SPEAKER_LEVEL_INTERACTION_GOOD,
SUM(RESPONSE9=3) AS SPEAKER_LEVEL_INTERACTION_AVERAGE,
SUM(RESPONSE9=4) AS SPEAKER_LEVEL_INTERACTION_POOR,
SUM(RESPONSE9=5) AS SPEAKER_LEVEL_INTERACTION_VERY_POOR,
SUM(RESPONSE10=1) AS UTILIZE_LEARNING_SESSION_EXELLENT,
SUM(RESPONSE10=2) AS UTILIZE_LEARNING_SESSION_GOOD,
SUM(RESPONSE10=3) AS UTILIZE_LEARNING_SESSION_AVERAGE,
SUM(RESPONSE10=4) AS UTILIZE_LEARNING_SESSION_POOR,
SUM(RESPONSE10=5) AS UTILIZE_LEARNING_SESSION_VERY_POOR,
SUM(RESPONSE11=1) AS OVERALL_ABILITY_EXCELLENT,
SUM(RESPONSE11=2) AS OVERALL_ABILITY_GOOD,
SUM(RESPONSE11=3) AS OVERALL_ABILITY_AVERAGE,
SUM(RESPONSE11=4) AS OVERALL_ABILITY_POOR,
SUM(RESPONSE11=5) AS OVERALL_ABILITY_VERY_POOR
FROM
M_CTC_PARTICIPANT_FEEDBACK MCPF
LEFT JOIN
M_CTC_USERS MCU
ON
MCPF.FK_USER_CTC_MAPPING_ID = MCU.PK_ID
LEFT JOIN
M_CTC_INFO MCI
ON
MCI.PK_ID = MCU.FK_CTC_ID
WHERE
MCI.FK_INTERNAL_PRESENTER_ID =
DDLPRESENTERLIST.SELECTEDVALUE ;";
//Some codes need to be added now
}
如果可以使用简单的方法或者应该使用ajax，请告诉我。
用于绘图的 jQuery 示例(它具有静态值，需要来自查询的动态值):
function bargraph7() {
$.jqplot.config.enablePlugins = true;
// For horizontal bar charts, x an y values must will be "flipped"
// from their vertical bar counterpart.
line1 = [[50, "very_poor"], [100, "poor"], [120, "average"], [135, "good"], [150, "excellent"]];
$.jqplot('chart7', [line1], {
seriesColors: ['#FF0000', '#FF8C00', '#FFFF00', '#32CD32', '#006400'],
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
// Show point labels to the right ('e'ast) of each bar.
// edgeTolerance of -15 allows labels flow outside the grid
// up to 15 pixels. If they flow out more than that, they
// will be hidden.
pointLabels: { show: true, location: 'e' },
// Rotate the bar shadow as if bar is lit from top right.
shadowAngle: 135,
// Here's where we tell the chart it is oriented horizontally.
rendererOptions: {
barDirection: 'horizontal',
barWidth: 11,
// Set varyBarColor to true to use the custom colors on the bars.
varyBarColor: true
}
},
axesDefaults: {
tickOptions: {
fontFamily: 'Georgia',
fontSize: '10pt',
angle: -30
}
},
grid: {
drawGridlines: false,
borderColor: 'transparent',
shadow: false,
drawBorder: false,
shadowColor: 'transparent'
},
axes: {
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer
}
}
});
}
我现在在 Page_Load 中使用以下语句来显示这个具有静态值的条形图:
Page.ClientScript.RegisterStartupScript(Page.GetType(), "PostbackClick", "bargraph7();", true);
示例条形图图像:
同样，我想使用其他具有动态值的条形图。
现在请告诉我以下内容:
1)如何让一个jQuery函数通用显示所有11个条形图，条形图id为chart1，chart2.....chart11？
2) 我应该在 jQuery/Codebehind 中添加什么来显示具有动态值的条形图？
最佳答案
当您触发 StatupScript 中的方法时，您可以传递绘图的所有值，以便它们可以在加载时显示。
Page.ClientScript.RegisterStartupScript(Page.GetType(), "Graph",
"PlotBarGraph(" + "'chartId'" + ","
+ reader.value1 + "," + reader.value2 + ");", true);
并且在 js 文件(客户端)中，您可以将 PlotBarGraph() 定义为
function PlotBarGraph(id , value1, value2) {
$.jqplot.config.enablePlugins = true;
// For horizontal bar charts, x an y values must will be "flipped"
// from their vertical bar counterpart.
line1 = [[value1, "No"], [value2, "Yes"]];
$.jqplot(id, [line1], {
seriesColors: ['#FF0000', '#006400'],
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
// Show point labels to the right ('e'ast) of each bar.
// edgeTolerance of -15 allows labels flow outside the grid
// up to 15 pixels. If they flow out more than that, they
// will be hidden.
pointLabels: { show: true, location: 'e' },
// Rotate the bar shadow as if bar is lit from top right.
shadowAngle: 135,
// Here's where we tell the chart it is oriented horizontally.
rendererOptions: {
barDirection: 'horizontal',
barWidth: 11,
// Set varyBarColor to true to use
//the custom colors on the bars.
varyBarColor: true
}
},
axesDefaults: {
tickOptions: {
fontFamily: 'Georgia',
fontSize: '10pt',
angle: -30
}
},
grid: {
drawGridlines: false,
borderColor: 'transparent',
shadow: false,
drawBorder: false,
shadowColor: 'transparent'
},
axes: {
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer
}
}
});
}
希望这会正常工作，你的问题会得到解决..:-)
关于c# - 如何对动态获取数据的 11 个条形图使用通用的 jqPlot 函数？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20286890/