Question

请考虑以下代码：

在我的文件标题内添加标记

<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>

在我的个人资料的正文标记内添加标记：

<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#">

Answer 1

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

我不会给你代码来执行此操作，因为这是一个相当简单的操作，如果您选择查找它，您可以轻松找到相关信息。

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

Answer 2

您需要做的是将服务器端coldfusion查询中的值输出到客户端javascript中。 e.g

<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;只是正常输出值，不应该需要转储＆＃39;价值观生产代码。

Answer 3

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

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

3 个答案: