如何将查询结果传递给Amchart？

继在我的文件

<script> 

var chart; 

var chartData = [{ 
    ConnectionType: "First", 
    NumberPercentage: 1194, 
{ 
    ConnectionType: "Second", 
    NumberPercentage: 1882}, 
{ 
    ConnectionType: "Third", 
    NumberPercentage: 1809}, 
{ 
    ConnectionType: "Fourth", 
    NumberPercentage: 1322}, 
{ 
    ConnectionType: "Fifth", 
    NumberPercentage: 1122}, 
{ 
    ConnectionType: "Sixth", 
    NumberPercentage: 1114}, 
{ 
    ConnectionType: "Seventh", 
    NumberPercentage: 984} 
    ]; 


AmCharts.ready(function() { 
    // PIE CHART 
    chart = new AmCharts.AmPieChart(); 

    // title of the chart 
    chart.addTitle("3D Donut Charts", 16); 

    chart.dataProvider = chartData; 
    chart.titleField = "ConnectionType"; 
    chart.valueField = "NumberPercentage"; 
    chart.sequencedAnimation = true; 
    chart.startEffect = "elastic"; 
    chart.innerRadius = "30%"; 
    chart.startDuration = 2; 
    chart.labelRadius = 15; 

    // the following two lines makes the chart 3D 
    chart.depth3D = 10; 
    chart.angle = 15; 

    // WRITE         
    chart.write("chartdiv"); 
}); 

</script>

的标题标签继我的个人资料的body标签内标签：

<div id="chartdiv" style="width: 100%; height: 362px;"></div>

我要回数据从我的ColdFusion文件中的以下cfquery。为了简单起见，我只提到cfquery用于第一次连接。除了名称之外，其余的cfqueries到第七个都是一样的。

<cfquery datasource = "XX.XX.X.XX" name="qCFCHART"> 
SELECT 
    Count(*) AS TOTAL_CONNECTION 
, Sum(CASE WHEN 'FIRST' = EVENTS THEN 100 END)/Count(*) AS FIRST 
, Sum(CASE WHEN 'SECOND' = EVENTS THEN 100 END)/Count(*) AS SECOND 
, Sum(CASE WHEN 'THIRD' = EVENTS THEN 100 END)/Count(*) AS THIRD 
, Sum(CASE WHEN 'FOURTH' = EVENTS THEN 100 END)/Count(*) AS FOURTH 
, Sum(CASE WHEN 'FIFTH' = EVENTS THEN 100 END)/Count(*) AS FIFTH 
, Sum(CASE WHEN 'SIXTH' = EVENTS THEN 100 END)/Count(*) AS SIXTH 
, Sum(CASE WHEN 'SEVENTH' = EVENTS THEN 100 END)/Count(*) AS SEVENTH 
    FROM MyDatabase; 
</cfquery>

考虑从上面的脚本代码：

ConnectionType: "First", 
NumberPercentage: 1194,

我想要显示从上述查询通过“FIRST”返回到我的饼图和写作cfdump或任何ColdFusion的相关结果不在那里工作。

例如：

ConnectionType: "First", 
NumberPercentage: <cfdump var="#qCFCHART.FIRST#>",

以上抛出一个错误，我看到一个明显的原因是因为我在里面的脚本标签，我想知道如何进行？有什么建议么？

这里是以下一些意见后，我的尝试：

<cfoutput query="qCFCHART"> 
    #currentrow#) 
    <cfloop index="col" list="#columnlist#"> 
      #col#=#qCFCHART[col][currentRow]# 
    </cfloop> 
    <p/> 
</cfoutput> 


<cfset cols = getMetadata(qCFCHART)> 
<cfdump var="#cols#">

来源

2013-08-02 Tan

你需要做的是从你的服务器端的ColdFusion查询到您的客户端JavaScript输出值。例如

<cfoutput> 
var chartData = [{ 
    ConnectionType: "First", 
    NumberPercentage: #qCFCHART.FIRST#}, 
{ 
    ConnectionType: "Second", 
    NumberPercentage: #qCFCHART.Second#}, 
{ 
    ConnectionType: "Third", 
    NumberPercentage: #qCFCHART.Third#}, 
{ 
    ConnectionType: "Fourth", 
    NumberPercentage: #qCFCHART.Fourth#}, 
{ 
    ConnectionType: "Fifth", 
    NumberPercentage: #qCFCHART.Fifth#}, 
{ 
    ConnectionType: "Sixth", 
    NumberPercentage: #qCFCHART.Sixth#}, 
{ 
    ConnectionType: "Seventh", 
    NumberPercentage: #qCFCHART.Seventh#} 
    ]; 
</cfoutput>

您cfdump做法也不会管用的主要原因是因为你有一个语法错误的位置：

<cfdump var="#qCFCHART.FIRST#>"

本来应该

<cfdump var="#qCFCHART.FIRST#">

但我强烈推荐反对使用cfdump;只需输出正常的值，不需要将任何值“转储”到生产代码中。

来源

2013-08-05 13:37:58 duncan

您需要遍历查询并创建一个类似于图表所期望的数据结构 - 这看起来像是一个结构数组。

我不会给你这样做的代码，因为它是一个相当简单的操作，而且你可以很容易地找到有关你是否选择寻找它的信息。

然后，您可以使用serialzeJSON（data）来获取数据的JSON版本 - 应该与示例代码中的chartData具有相同的结构。

来源

2013-08-05 13:53:29

你在你的评论中提到我需要循环查询，然后使用serializeJSON（data）。但是，如果我第一次使用serializeJSON（数据），我可以在浏览器中看到JSON格式的结果，但仍然想知道如何从该格式提取特定值。请让我知道我是否正朝着正确的方向前进？ P.S：如果需要的话，我没有使用jQuery的经验。 – Tan

所以，你心甘情愿地没有遵循我的建议，然后问我为什么不起作用？你不能只在你的查询中做serializeJSON（）（你似乎在说），并期望它与你的图表所期望的格式相同。如果遵循我所做的，则不需要使用jQuery，只需将serializeJSON（data）的值设置为JavaScript变量'' –

我没有心甘情愿做任何事情，我唯一的意图是澄清我的问题。我已经更新了原始文章中的代码，并且可以在执行 '代码后看到结构数组作为输出。请让我知道我是否正朝着正确的方向前进？ 2）如果我在这里使用serializeJSON（cols），那么它只显示JSON格式的结构数组。让我知道是否有什么错我正在做的帽子。谢谢 – Tan

这个问题的简单解决方法是我需要在Number Percentage字段后面提及<cfoutput>#serializeJSON(qCFCHART.First)#</cfoutput>并且它工作正常。

来源

2013-08-12 17:51:43 Tan

对于您正在尝试解决的问题，这是一个非常糟糕的方法。斯科特给了你更好的答案。 –

如何将查询结果传递给Amchart？

回答

相关问题