ogle-Charts in SharePoint WebPa
https://sharepoint.stackexchange.com/questions/122313
-
30-09-2020 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianFrage
03Cp> Vor Beginn habe ich den folgenden Code auf einem c # -Projekt "nicht sharepoint Verwandte" getestet, und es funktioniert, ich kenne u003Cem>ein wenigu003C/em> über SharePoint WebPart-Entwicklung, aber ich verstehe nicht, warum dieser Code nicht im WebPart funktioniert, das ich bin tun...u003C/
03Cp> u003Cstrong>Bearbeitenu003C/strong> : Skript-API hinzugefügt:u003C/
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
03Cp> Ich bin mit dem folgenden Thema konfrontiert:u003C/
03Cp> Ich entwickle ein Farm-Solution-WebPart, das u003Cstrong>u003Cem>dynamischu003C/em>u003C/strong> ein Spaltendiagramm oder ein Kreisdiagramm erzeugt (je nach Auswahl eines von einem von ListItem in der Radiobuttonliste):u003C/
<asp:RadioButtonList ID="rbt_graphicType" runat="server" AutoPostBack="true" OnSelectedIndexChanged="rbt_graphicType_SelectedIndexChanged">
<asp:ListItem Text="Meeting Type" Selected="True" /> <!--Column Chart-->
<asp:ListItem Text="Meeting Category" /> <!--Pie Chart-->
</asp:RadioButtonList>
03Cp> u003Cem>Wenn ich dynamisch sage, meine ich, ich baue JavaScript-Code in einer Methode und nenne es in Page_load-Ereignis.u003C/em>u003C/
03Cp> Das generierte JavaScript wird in der Panel-Steuerung namens "PNL_DATA" enthalten, und das Diagramm befindet sich in einem Div-Element "Chart_Div".u003C/
<asp:Panel ID="pnl_data" runat="server">
</asp:Panel>
<div id="chart_div">
</div>
<asp:Label ID="MessageLabel" runat="server" />
03Cp> Der Code-hintere ist u003Cem>einfachu003C/em> (meiner Meinung nach).u003C/
/// <summary>
/// Page_Load.
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void Page_Load(object sender, EventArgs e)
{
GenerateChart();
}
/// <summary>
/// SelectedIndexChanged event for call "GenerateChart" method.
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void rbt_graphicType_SelectedIndexChanged(object sender, EventArgs e)
{
GenerateChart();
}
/// <summary>
/// Method called in Page_Load.
/// Generate a chart according to RadioButtonList selection.
/// </summary>
private void GenerateChart()
{
try
{
//Initialize variables.
string built_js = ""; //The "built_js" variable will hold the js generated in the folowing lines of code.
HtmlGenericControl html_js = new HtmlGenericControl("script");
pnl_data.Controls.Clear();
if (rbt_graphicType.Items[0].Selected)
{
//Build js code for generate Column Chart.
built_js += " \n google.load('visualization', '1', { 'packages': ['columnchart'] }); \n";
built_js += " \n";
built_js += " google.setOnLoadCallback(drawChart); \n";
built_js += " \n";
built_js += " function drawChart() { \n";
built_js += " var data = google.visualization.arrayToDataTable([ \n";
built_js += " ['Tipo de reunión No.1 33.5%', 'Tipo de reunión No.2 70%', 'Tipo de reunión No.3 58%', 'Tipo de reunión No.4 82%', 'Tipo de reunión No.5 44%'], \n";
built_js += " [33.5, '', '', '', ''], \n";
built_js += " ['', 70, '', '', ''], \n";
built_js += " ['', '', 58, '', ''], \n";
built_js += " ['', '', '', 82, ''], \n";
built_js += " ['', '', '', '', 44] \n";
built_js += " ]); \n";
built_js += " \n";
built_js += " var options = { \n";
built_js += " width: 600, \n";
built_js += " height: 300, \n";
built_js += " is3D: true, \n";
built_js += " title: '" + dd_salas.SelectedItem.Text + "', \n";
built_js += " bar: { groupWidth: '20%' }, \n";
built_js += " legendFontSize: '10', \n";
built_js += " min: 10, \n";
built_js += " max: 100 \n";
built_js += " }; \n";
built_js += " \n";
built_js += " var chart = new google.visualization.ColumnChart(document.getElementById('chart_div')); \n";
built_js += " chart.draw(data, options); \n";
built_js += " } \n";
//Show text for "check" which Chart was generated.
MessageLabel.Text = "Column Chart generated.<br/>";
}
if (rbt_graphicType.Items[1].Selected)
{
//Build js code for generate Pie Chart.
//...
//Show text for "check" which Chart was generated.
MessageLabel.Text = "Pie Chart generated.<br/>";
}
//Add javscript code to InnerHtml attribute and built the <script> tag correctly.
html_js.Attributes.Add("type", "text/javascript");
html_js.InnerHtml = built_js;
pnl_graficos.Controls.Add(html_js);
html_js = new HtmlGenericControl("script");
}
catch { MessageLabel = "Error in the ''GenerateChart'' method."; }
}
03Cp> u003Cstrong>Bearbeitenu003C/strong> : Die Werte von Diagrammen können sich entsprechend dem ausgewählten Element von der Dropdownlist-Steuerung ändern (die Elemente haben bereits Werte, und es gibt keinen Punkt, der auf die Elemente des Dropdownlists ausgerichtet ist) - mein schlechtes, ich habe diesen Code vor der Antwort von @Rephistorch nicht hinzugefügt.u003C/
03Cp> u003Cstrong>Bearbeitenu003C/strong> : Der JavaScript-Code für Generieren der Diagramme ist möglicherweise nicht u003Cem>elegantu003C/em> , aber es ist voll funktionsfähig (ich habe es in C # -Projekt getestet - wie ich zu Beginn meiner Frage gesagt habe -).u003C/
<asp:Label ID="lbl_selRoom" Text="Select the room" />
<asp:DropDownList ID="dd_rooms" runat="server">
<asp:ListItem Text="Room 1" Selected="True" />
<asp:ListItem Text="Room 2" />
<asp:ListItem Text="Room 3" />
<asp:ListItem Text="Room 4" />
<asp:ListItem Text="Room 5" />
</asp:DropDownList>
03Cp> Die Ergebnisse, die in dem WebPART bereitgestellt werden, wenn ich ausgeführt wurde, u003Cem>nuru003C/em> den auf "Messagelabel" -Regler hinzugefügten Sample-Text und das ordnungsgemäß erzeugte u003Cem>Säulendiagrammu003C/em> ( u003Cem>da das erste Element in der Radiobuttonlist standardmäßig ausgewählt ist.u003C/em> Ich habe auch das als ausgewählte zweite Element geprüft Standardeinstellung und die gleiche Situation passiert -).u003C/
03Cp> Ich habe den Konsolenbrowser überprüft, und es gibt jedoch keine Warnung oder Fehler über js, wenn sich die Auswahl ändert, wenn sich die Auswahl ändert, den Kartencode "selbst wenn die Seite u003Cem>Reladetu003C/em> " nicht ändert (immer noch das Spaltendiagramm, jedoch kein Rendering, das Element "chart_div" ist leer).u003C/
03Cp> Ich kann den generierten JS (und den C # -Mustercode voll) teilen, aber der Code ist auf Spanisch und ich versuche die Frage, die beste Verständnis zu machen, die ich kann.u003C/
Lösung 2
03Cp> Nach einigen Anpassungen und mithilfe von Google Chrome-Konsolen für Debug-Bei der Laufzeit auf der Laufzeit wird angezeigt, dass selbst wenn die Auswahl des Diagramms Änderungen erzeugt, die Diagrammspalte u003Cem>oder Kuchenu003C/em> überhaupt nicht rendern (dh es gibt kein Bild), sondern u003Cem>der Code der Grafiku003C/em> tut.u003C/
03Cp> Mit diesem modifizierten Code ist beide, dass die 3D-Spalte und der Kreisdiagramme jetzt rendern:u003C/
/// <summary>
/// OnPreRender.
/// </summary>
/// <param name="e"></param>
protected override void OnPreRender(EventArgs e)
{
base.OnPreRender(e);
#region Sección que obtiene los valores válidos para mostrar el Pie Chart.
DataTable data = GetRoomStadistics();
Page.ClientScript.RegisterArrayDeclaration(
"MyArrayData", "['RoomTypes', 'Percentaje']");
////Registrar las ítems dentro del arreglo de javascript "en el lado cliente".
foreach (DataRow dataitem in data.Rows)
{
Page.ClientScript.RegisterArrayDeclaration("MyArrayData",
string.Format("['{0}', {1}]",
dataitem["RoomTypes"],
dataitem["Percentaje"]));
}
data = new DataTable();
#endregion
GenerateCharts();
}
/// <summary>
/// Page_Load.
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void Page_Load(object sender, EventArgs e)
{
if (!this.Page.IsPostBack)
{
//Get the rooms "fill DropDownList control".
GetRooms();
#region Code for obtain datatable with example data for generate the Pie Chart.
DataTable data = GetRoomStadistics();
Page.ClientScript.RegisterArrayDeclaration(
"MyArrayData", "['RoomTypes', 'Percentaje']");
////Register items inside javascript array "client side".
foreach (DataRow dataitem in data.Rows)
{
Page.ClientScript.RegisterArrayDeclaration("MyArrayData",
string.Format("['{0}', {1}]",
dataitem["RoomTypes"],
dataitem["percentaje"]));
}
data = new DataTable();
#endregion
}
GenerateCharts();
}
/// <summary>
/// Obtener las salas y agregarlos como ítems del DropDownList.
/// </summary>
private void GetRooms()
{
//Put code for add ListItems to DroDownListItem.
}
/// <summary>
/// Determina el tipo de gráfica a Build.
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void rbt_graphicType_SelectedIndexChanged(object sender, EventArgs e)
{
GenerateCharts();
}
/// <summary>
/// Mauricio Arias Olave.
/// 19/11/2014.
/// De acuerdo a la opción seleccionada en el RadioButtonList y al a sala seleccionada, se Buildá
/// una gráfica que indica las estadísticas de la sala seleccionada.
/// </summary>
private void GenerateCharts()
{
try
{
//Inicializar variables.
string built_js = "";
HtmlGenericControl html_js = new HtmlGenericControl("script");
pnl_data.Controls.Clear();
//1.0
if (rbt_graphicType.Items[0].Selected)
{
#region Build Column Chart.
//Clean string before generate javascript code.
built_js = "";
built_js += " \n google.load('visualization', '1', { 'packages': ['columnchart'] }); \n";
built_js += " \n";
built_js += " google.setOnLoadCallback(drawChart); \n";
built_js += " \n";
built_js += " function drawChart() { \n";
built_js += " var data = google.visualization.arrayToDataTable([ \n";
built_js += " ['Meeting Type # 1 33.5%', 'Meeting Type # 2 70%', 'Meeting Type # 3 58%', 'Meeting Type # 4 82%', 'Meeting Type # 5 44%'], \n";
built_js += " [33.5, '', '', '', ''], \n";
built_js += " ['', 70, '', '', ''], \n";
built_js += " ['', '', 58, '', ''], \n";
built_js += " ['', '', '', 82, ''], \n";
built_js += " ['', '', '', '', 44] \n";
built_js += " ]); \n";
built_js += " \n";
built_js += " var options = { \n";
built_js += " width: 600, \n";
built_js += " height: 300, \n";
built_js += " is3D: true, \n";
built_js += " title: '" + dd_rooms.SelectedItem.Text + "', \n";
built_js += " bar: { groupWidth: '20%' }, \n";
built_js += " legendFontSize: '10', \n";
built_js += " min: 10, \n";
built_js += " max: 100 \n";
built_js += " }; \n";
built_js += " \n";
built_js += " var chart = new google.visualization.ColumnChart(document.getElementById('chart_div')); \n";
built_js += " chart.draw(data, options); \n";
built_js += " } \n";
#endregion
MessageLabel.Text = "Column chart!";
}
if (rbt_graphicType.Items[1].Selected)
{
#region Build Pie Chart.
//Clean string before generate javascript code.
built_js = "";
built_js += " google.load('visualization', '1', { packages: ['corechart'] }); \n";
built_js += " function drawVisualization() { \n";
built_js += " \n";
built_js += " /''MyArrayData'': array declarated in server side.*/ \n";
built_js += " var ChartData = google.visualization.arrayToDataTable(MyArrayData); \n";
built_js += " \n";
built_js += " /*Settings*/ \n";
built_js += " var ChartOptions = { \n";
built_js += " 'title': '" + dd_rooms.SelectedItem.Text + "', \n";
built_js += " 'titleTextStyle': { color: 'black', fontName: '\"Verdana\"', fontSize: 12 }, \n";
built_js += " 'width': 350, \n";
built_js += " 'height': 350, \n";
built_js += " 'backgroundColor': 'white', \n";
built_js += " 'chartArea': { 'width': '90%', 'height': '70%' }, \n";
built_js += " 'pieSliceText': 'percentage', \n";
built_js += " 'tooltip': { textStyle: { color: 'black', fontName: '\"Verdana\"', fontSize: 12} }, \n";
built_js += " /*'tooltip': { trigger: 'none' }, */ /*Ocultar tooltip*/ \n";
built_js += " 'is3D': true, \n";
built_js += " legend: 'bottom', \n";
built_js += " /*pieStartAngle: 20*/ \n";
built_js += " }; \n";
built_js += " \n";
built_js += " /*Draw the pie chart.*/ \n";
built_js += " new google.visualization.PieChart(document.getElementById('chart_div')). \n";
built_js += " draw(ChartData, ChartOptions); \n";
built_js += " } \n";
built_js += " google.setOnLoadCallback(drawVisualization); \n";
#endregion
MessageLabel.Text = "Pie chart!";
}
//Add <script> element to "pnl_data" element.
html_js.Attributes.Add("type", "text/javascript");
html_js.InnerHtml = built_js;
pnl_data.Controls.Add(html_js);
html_js = new HtmlGenericControl("script");
}
catch (Exception ex) { MessageLabel.Text += "Error: " + ex.Message; }
}
/// <summary>
/// sampleTable con los indicadores de las salas.
/// </summary>
/// <returns>DataTable.</returns>
private DataTable GetRoomStadistics()
{
DataTable sampleTable = new DataTable();
try
{
DataColumn col_RoomType = new DataColumn();
col_RoomType.ColumnName = "RoomTypes";
col_RoomType.DataType = typeof(System.String);
DataColumn col_RoomPercentaje = new DataColumn();
col_RoomPercentaje.ColumnName = "Percentaje";
col_RoomPercentaje.DataType = typeof(System.String);
sampleTable.Columns.Add(col_RoomType);
sampleTable.Columns.Add(col_RoomPercentaje);
sampleTable.Rows.Add(new object[] { "Meeting Type # 1", "33.5" });
sampleTable.Rows.Add(new object[] { "Meeting Type # 2", "70" });
sampleTable.Rows.Add(new object[] { "Meeting Type # 3", "58" });
sampleTable.Rows.Add(new object[] { "Meeting Type # 4", "82" });
sampleTable.Rows.Add(new object[] { "Meeting Type # 5", "44" });
return sampleTable;
}
catch { return sampleTable; }
}
/// <summary>
/// SelectedIndexChanged.
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void dd_rooms_SelectedIndexChanged(object sender, EventArgs e)
{
GenerateCharts();
}
03Cp> Eine genaue Ansicht des Codes, ich benutze kein Splisitem-, SPQUERY- und / oder ähnliches SharePoint-Class, um Daten zu erhalten u003Cem>(ich verzichtete es, weil dies nicht Teil des Hauptbereichs meiner Frage ist).u003C/em>u003C/
03Cp> Es gibt eine kurze Beschreibung, über die ich folge, um diese Ergebnisse zu erhalten:u003C/
- 03Col> nu0
- 03Cli> Anruf von u003Cstrong>generatechart ()u003C/strong> -Methode in ( u003Cem>OnPrerenderu003C/em> , u003Cem>PageLoad-u003C/em> und u003Cem>Rechenindexchangedu003C/em> -Methode).u003C/l i> nu0
- 03Cli> In der u003Cstrong>Page_load-u003C/strong> Methode muss der Anruf an der generationspflichtigen u003Cstrong>()u003C/strong> -Methode u003Cem>außerhalbu003C/em> des Condional u003Cem>-ISPOSTBAST seinu003C/em> .u003C/l i> nu003C/o
03Cp> u003Cem>Ich weiß nicht, ob dies der beste Ansatz ist, um Diagramme dynamisch zu generieren,u003C/em> aber jeder kann diesen Code für Ihren Zweck ändern.u003C/
03Cp> Auch in Internet Explorer rendert das 3D-Spaltendiagramm nicht. u003Cem>Ich weiß, dass der Säulenchartu003C/em> 03Ca href="https://google-developers.appspot.com/chart/interactive/docs/gallery/columnchart_old" rel="nofollow">veraltetu003C/ ist, aber es funktioniert, wenn:u003C/
- 03Col> nu0
- 03Cli> Öffnen Sie das F12-Entwickler-Tool.u003C/l i> nu0
- 03Cli> Ändern Sie den u003Cstrong>Dokumentmodusu003C/strong> , der u003Cem>Standardu003C/em> für den u003Cstrong>Internet Explorer 7 Standard bleibt.u003C/strong>u003C/l i> nu003C/o
03Cp> Ich denke, dass es einen u003Cem>saubererenu003C/em> Weg gibt, um ähnliche Ergebnisse zu erhalten, oder Betrügergebnisse, aber für den Umfang meiner Frage ist dies ein akzeptierter.u003C/
Andere Tipps
03Cp> Anstatt das google.setOnLoadCallback(drawChart);-Ereignis von Google in Ihrem JavaScript zu verwenden, versuchen Sie, _spBodyOnLoadFunctionNames.push("drawChart"); zu verwenden.u003C/
03Cp> Meine Theorie ist, dass bei der Zeit von Google-API geladen wurde, dass das DOM Ihrer Seite nicht vollständig gebaut wurde, und daher gibt es keinen Zugriff auf "chart_div".u003C/
03Cp> SIDENOTE: Ich würde empfehlen, die Stringbuilder-Klasse anstelle von all dieser Verkettung zu verwenden. Es hat nichts mit Ihrem Problem zu tun, aber ein AppendLine("...") ist einfacher als nur \n überall. Fühlen Sie sich frei, dies zu ignorieren, wenn Sie möchten.u003C/
