2016-03-25 9 views
0

Ich versuche, meine douhnut Diagramm mit Daten, die ich von meinem Backend bekommen zu füllen, aber es funktioniert nicht ..ChartJS hinzufügen Daten aus string

Kann mir jemand sagen, was ich falsch mache und wie sie beheben es.

var pieChartCanvas = $("#pieChart").get(0).getContext("2d"); 
var pieOptions = { ... }; 
var pieChart = new Chart(pieChartCanvas); 
pieChart.Doughnut(PieData, pieOptions); 

Problem ist mit dem 'PieData'. Wenn ich mache dies im javascript:

var PieData = 
    [ 
    { 
    value: 400, 
    color: "#f39c12", 
    highlight: "#f39c12", 
    label: "FireFox" 
    } 
    ]; 

Alles funktioniert gut.

Aber ich mag die Werte aus meinem Backend setzen:

var token2 = document 
.querySelector('script[data-id="MyUniqueName"][data-token2]') 
.getAttribute('data-token2'); 

mit token2 = „{Wert: 100, Farbe: '# 00a65a', markiert: '# 00a65a', Label: 'IE' } "

Ich habe versucht, das [] in der Zeichenfolge hinzuzufügen oder var data = [token2] zu machen, aber nichts funktioniert.

Ich bin schlecht bei Javascript, vielleicht weiß jemand meine Antwort.

EDIT:

Ich arbeite mit ASP.NET/C# für meine Website. Die Methode, die ich die Daten an das Javascript geben bin mit ist: HTML-Seite:

<scrpt type='text/javascript' data-id="MyUniqueName" data-token2="<%=Data%>" src='<%=ResolveUrl("~/dist/js/pages/dashboard2.js")%>' ></script> 

C#:

private String _data = String.Empty; 
protected String Data { 
     get { 
     return this._data; 
     } 
     set { 
      this._data = value; 
     } 
    } 

protected void Page_Load(object sender, EventArgs e) { 
    Data = "{ value: 100, color: '#00a65a', highlight: '#00a65a', label: 'IE' } "; 
} 
+0

Können Sie klären? Wie versuchst du Werte von deinem Backend zu setzen? Welche Sprache? KnotenJS? Ich verwende die ChartJS-Bibliothek und mache einfach etwas wie wo es gebraucht wird ... –

+0

@BozidarSikanjic Siehe bearbeiten auf Frage – Niels

Antwort

0

ich mein C# -Code ändern musste:

Data = "{ &quot;value&quot;: &quot;100&quot;, &quot;color&quot;: &quot;#00a65a&quot;, &quot;highlight&quot;: &quot;#00a65a&quot;, &quot;label&quot;: &quot;IE&quot; } "; 

Ich musste alles angeben, und es war nicht mitarbeiten, ich brauchte &quot

Und mit JSON es in ein Objekt umgewandelt zu setzen:

var PieData = JSON.parse(token2); 

Ich bin nicht wirklich sicher, ob dies die beste Lösung ist, aber es ist jetzt arbeiten.

+0

Schön, dass Sie es funktioniert haben. Prost! – potatopeelings