Question

我正试图在此图表中添加两条垂直线，

 <cfchartseries type="line" seriescolor="Red">
                                <cfloop index="ScoringPercent" array="#ScoringPercents[1]#" >  

                                    <cfchartdata item="#ScoringPercent#" value="74" >

                                </cfloop>
                            </cfchartseries>


                            <cfchartseries type="line" seriescolor="Yellow">
                                <cfloop index="ScoringPercent" array="#ScoringPercents[1]#" >  

                                    <cfchartdata item="#ScoringPercent#" value="53" >

                                </cfloop>
                            </cfchartseries

奇怪的是，它添加了图表上方的线条

这是为什么？这些线不应该跨越74和53线吗？

Answer 1

当您使用堆叠条形图时，您添加的每个系列都将显示在彼此之上。

因此，红线系列位于条形图上方，高于100点标记74点（Y轴上174点标记）。类似地，黄线系列位于红线上方53点的红线上方（Y轴上的227点标记处）。

<强>更新

如果你使用的是ColdFusion 10及以上版本，你可以这样做。从ColdFusion版本10开始，ColdFusion使用ZingCharts，允许通过JSON样式文件进行更多自定义。注意：这是您需要替换它的示例代码。

<cfset arr1 = [10,20,30,40,50] />
<cfset arr2 = [20,10,60,70,30] />
<cfset arr3 = [90,50,40,10,80] />

<cfchart chartwidth="1000" chartheight="750" format="html" style="LineStackedBar.json">

    <cfchartseries type="Bar" seriescolor="Green">

        <cfloop index="ScoringPercent2" array="#arr1#" > 

            <cfchartdata item="#ScoringPercent2#" value="#ScoringPercent2#">

         </cfloop>

     </cfchartseries>

    <cfchartseries type="Bar" seriescolor="Yellow">

        <cfloop index="ScoringPercent2" array="#arr2#" > 

            <cfchartdata item="#ScoringPercent2#" value="#ScoringPercent2#">

         </cfloop>

     </cfchartseries>

    <cfchartseries type="Bar" seriescolor="Red">

        <cfloop index="ScoringPercent2" array="#arr3#" > 

            <cfchartdata item="#ScoringPercent2#" value="#ScoringPercent2#">

         </cfloop>

     </cfchartseries>

     <cfchartseries type="line" seriescolor="Red">
        <cfloop index="ScoringPercent2" array="#arr3#" >  

            <cfchartdata item="#ScoringPercent2#" value="74" >

        </cfloop>
    </cfchartseries>


    <cfchartseries type="line" seriescolor="Yellow">
        <cfloop index="ScoringPercent2" array="#arr2#" >  

            <cfchartdata item="#ScoringPercent2#" value="53" >

        </cfloop>
    </cfchartseries>

</cfchart>

<强> LineStackedBar.json

{
"graphset":[
    {
        "legend":{
            "position":"30%, 0%",
            "border-color":"#CCCCCC",
            "background-color":"#FFFFFF",
            "margin-top":40,
            "layout":"x4",
            "shadow":false,
            "alpha":1
        },
        "border-color":"#cccccc",
        "tooltip":{
            "font-size":11,
            "font-color":"#FFFFFF",
            "bold":true,
            "font-family":"Helvetica",
            "padding":5
        },
        "series":[
            {
                "hover-state":{ 
                    "visible":false
                },  
                "shadow-blur-y":1,
                "shadow-color":"#cccccc",
                "shadow-alpha":1,
                "shadow":true,
                "background-color-2":"#FFCF8C",
                "background-color":"#735328",
                "type":"bar",
                "stacked":"true",
                "shadow-distance":2,
                "shadow-blur-x":2
            },
            {
                "hover-state":{ 
                    "visible":false
                },  
                "shadow-blur-y":1,
                "shadow-color":"#cccccc",
                "shadow-alpha":1,
                "shadow":true,
                "background-color-2":"#FEFFD1",
                "background-color":"#9D9C5D",
                "type":"bar",
                "stacked":"true",
                "shadow-distance":2,
                "shadow-blur-x":2
            },
            {
                "hover-state":{ 
                    "visible":false
                },  
                "shadow-blur-y":1,
                "shadow-color":"#cccccc",
                "shadow-alpha":1,
                "shadow":true,
                "background-color-2":"#FEFFD1",
                "background-color":"#9D9C5D",
                "type":"bar",
                "stacked":"true",
                "shadow-distance":2,
                "shadow-blur-x":2
            },
            {
                "hover-state":{ 
                    "visible":false
                },  
                "line-color":"#699EBF",
                "border-color":"#699EBF",
                "line-width":3,
                "type":"line",   
                "stacked":"false"
            },
            {
                "hover-state":{ 
                    "visible":false
                },  
                "line-color":"#143F59",
                "border-color":"#143F59",
                "line-width":3,
                "type":"line",   
                "stacked":"false"
            }
        ],
        "plotarea":{
            "margin-top":80,
            "margin-left":70,
            "margin-right":30
        },
        "3d-aspect":{
            "true3d":false
        },
        "background-color":"white",
        "border-width":1,
        "plot":{
            "hover-marker":{
                "background-color":"#888888",
                "size":3
            },
            "marker":{
                "background-color":"#cccccc",
                "size":3
            },
            "preview":true,
            "tooltip-text":"%v"
        },
        "type":"mixed",
        "title":{
            "border-width":1,
            "border-color":"#cccccc",
            "background-color":"white",
            "font-size":18,
            "bold":true,
            "font-family":"Helvetica",
            "color":"#333333"
        }
    }
]
}

它会生成以下输出：

请参阅@ Mike的回答CfChart Stacked bars and unstacked Lines

在被堆积的长条图的线在coldfusion

1 个答案: