2017-01-26 2 views
4

J'utilise un diagramme à secteurs CF pour l'une de mes applications. Mais ça marche bizarrement. Le code suivant est le code de graphique et il donne une erreur. Il n'a même pas afficher le graphique. Je le sais, c'est dû à la présence de guillemets dans la valeur de la colonne de requête, col1.Présence de guillemets simples ou doubles dans SERIESLABEL ou ITEMLABEL donnant une erreur dans CFCHART

<cfoutput> 
    <script type="text/javascript"> 
     function Navigate(test){ 
      alert(test); 
     } 
    </script> 

<cfset testquery = queryNew("col1,Col2", "varchar,varchar") > 
<cfset queryAddRow(testquery, 1)> 
<cfset querySetCell(testquery, "col1", 'This is the "first" row') > 
<cfset querySetCell(testquery, "Col2", 5000) > 
<cfset queryAddRow(testquery, 1)> 
<cfset querySetCell(testquery, "col1", 'This is the second row') > 
<cfset querySetCell(testquery, "Col2", 2500) > 
<cfset queryAddRow(testquery, 1)> 
<cfset querySetCell(testquery, "col1", 'This is the third row') > 
<cfset querySetCell(testquery, "Col2", 8500) > 

    <CFCHART Format="Html" CHARTWIDTH="600" CHARTHEIGHT="650" TITLE="Pie Chart in CF11" URL="javascript:Navigate('$SERIESLABEL$')"> 
     <CFCHARTSERIES TYPE="pie" COLORLIST="##CA5940,##6FCF42,##4286CF" > 
     <CFLOOP FROM="1" TO="#testquery.RecordCount#" INDEx="i"> 
      <CFCHARTDATA ITEM="#testquery.col1[i]#" VALUE="#testquery.Col2[i]#"> 
     </CFLOOP> 
     </CFCHARTSERIES> 
    </CFCHART> 
</cfoutput> 

enter image description here

J'ai vérifié JSON du tableau dans le viewsource, il est très bien. Mais le code donnant l'erreur ci-dessus. Donc je ne sais pas pourquoi c'est donner une erreur. Sans doubles guillemets, le code fonctionne comme prévu, mais j'ai besoin des guillemets doubles, cela aura un impact sur l'application, si j'enlève la même chose. J'ai également essayé en remplaçant les guillemets doubles par des guillemets simples, dans ce cas, le graphique s'affiche, mais si nous cliquons sur la première zone de ligne, il donne la même erreur dans la console.

enter image description here

Donc, l'utilisation des guillemets est le problème majeur ici. Mais j'ai besoin du code ci-dessus pour afficher le graphique et en cliquant sur la zone, il devrait montrer l'étiquette correspondante telle qu'elle est.

Je ne suis pas sûr d'avoir manqué quelque chose, ou quoi que ce soit d'incorrect dans le code.

Répondre

4

Avez-vous essayé d'échapper les guillemets dans votre chaîne JSON?

Comme ceci par exemple:

<cfset querySetCell(testquery, "col1", 'This is the \"first\" row') > 

J'ai créé un point essentiel de votre code d'échantillon sur trycf.com et il semble fonctionner

http://trycf.com/gist/e3321edb3481411078b75ad187cae52b/acf11?theme=monokai

J'ai aussi essayé le même code exact sur un de nos serveurs ColdFusion 11 et ça marche bien aussi. Alors dites-vous que votre code d'exemple ne fonctionne pas ou que vous dites que votre code actuel ne fonctionne toujours pas? Si c'est votre code actuel, il doit y avoir quelque chose d'autre en jeu qui n'est pas montré dans votre exemple. Si vos données proviennent d'une base de données, vous devez vous assurer que ces caractères sont correctement échappés au moment où ColdFusion l'analyse.

Maintenant que vous voyez comment le caractère doit être échappé, vous pouvez utiliser la suggestion de ScottJibben à partir des commentaires et appeler simplement JSStringFormat() pour échapper ces caractères pour vous.

<CFCHARTDATA ITEM="#JSStringFormat(testquery.col1[i])#" VALUE="#testquery.Col2[i]#"> 
+0

Ouais j'ai essayé mais pas de chance. FYI: J'utilise cf11. –

+0

Cela a fonctionné quand je l'ai essayé sur trycf.com en utilisant votre échantillon. Je vais ajouter un aperçu de la réponse. –

+1

Ne serait-il pas plus simple d'utiliser JSStringFormat() au lieu d'échapper manuellement les chaînes? –