Question

我正在尝试使用Stacked Bars和unstacked Lines创建一个CFChart。一直试图在Webcharts Tool中解决但到目前为止没有运气。 ExampleStacked Chart

在示例图像中，所有系列都是seriesplacement=stacked，但我想将条形图（平均线和TDD）堆叠起来，将线条（最大值和最小值）设为seriesplacement=default。有没有办法在Cfchart中实现相同的目标？

Answer 1

如果我理解正确，只需在xml样式中设置行系列的位置：

<?xml version="1.0" encoding="UTF-8"?>
<frameChart>
    <elements place="Stacked" drawOutline="false">
        <series index="0" place="Default" shape="Line" />
        <series index="1" place="Default" shape="Line" />
  </elements>
</frameChart>

然后生成＆＃34;堆叠＆＃34;图表照常：

<cfchart format="png" style="#yourCustomStyle#">
    <cfchartseries type="line" serieslabel="Min">
      ...
    </cfchartseries>
    <cfchartseries type="line" serieslabel="Max">
        ...
    </cfchartseries>
    <cfchartseries type="bar" serieslabel="Avg" >
        ...
    </cfchartseries>
    <cfchartseries type="bar" serieslabel="TDD">
        ... 
    </cfchartseries>
</cfchart>

Answer 2

CFChart基于使用JSON格式化的ZingCharts。他们有一些好的文档和建设者。我还没弄明白如何让左边的y刻度调整为MIN值，MAX似乎是自动的。下面我将一些示例数据和代码（.cfm＆amp; .json）放在一起，供您开始使用。

一些入门数据和CFChart信息（Lines-StackedBars.cfm）

<cfscript>
    GraphData = queryNew("");
    queryAddColumn(GraphData, "dates", "Integer", ['1/1/11','1/2/11','1/3/11','1/4/11','1/5/11']);
    queryAddColumn(GraphData, "MIN", "Integer", [42,37,45,29,61]);
    queryAddColumn(GraphData, "MAX", "Integer", [110,98,82,103,94]);
    queryAddColumn(GraphData, "AVG", "Integer", [80,75,80,65,85]);
    queryAddColumn(GraphData, "TDD", "Integer", [23,33,32,28,26]);
</cfscript>

<cfchart chartwidth="800" 
     chartheight="500" 
     format="html" 
     style="LineStackedBar.json" 
     title="Unstacked Lines w/ Stacked Bars">

<cfchartseries query="GraphData" 
               type="Bar" 
               itemcolumn="dates" 
               valuecolumn="AVG" 
               color="blue" 
               serieslabel="AVG">

<cfchartseries query="GraphData" 
               type="Bar" 
               itemcolumn="dates" 
               valuecolumn="TDD" 
               color="green" 
               serieslabel="TDD">

<cfchartseries query="GraphData" 
               type="Line" 
               itemcolumn="dates" 
               valuecolumn="MIN" 
               color="red" 
               serieslabel="MIN">

<cfchartseries query="GraphData" 
               type="Line" 
               itemcolumn="dates" 
               valuecolumn="MAX" 
               color="orange" 
               serieslabel="MAX">
</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
                },  
                "line-color":"#699EBF",
                "border-color":"#699EBF",
                "line-width":3,
                "type":"line",
                "scales":"scale-x,scale-y-2",   
                "stacked":"false"
            },
            {
                "hover-state":{ 
                    "visible":false
                },  
                "line-color":"#143F59",
                "border-color":"#143F59",
                "line-width":3,
                "type":"line",
                "scales":"scale-x,scale-y-2",   
                "stacked":"false"
            }
        ],
        "scale-y":{
            "tick":{
                "line-gap-size":0,
                "line-color":"#cccccc",
                "line-width":1,
                "size":10
            },
            "font-size":16,
            "line-color":"#cccccc",
            "bold":true,
            "format":"%v",
            "item":{
                "font-size":11,
                "font-family":"Helvetica",
                "color":"#333333"
            },
            "label":{
                "color":"#333333"
            },
            "line-width":2,
            "font-family":"Helvetica",
            "color":"#333333"
        },
        "scale-y-2":{
            "tick":{
                "line-gap-size":0,
                "line-color":"#cccccc",
                "line-width":1,
                "size":10
            },
            "font-size":16,
            "line-color":"#cccccc",
            "bold":true,
            "format":"%v",
            "item":{
                "font-size":11,
                "font-family":"Helvetica",
                "color":"#333333"
            },
            "label":{
                "color":"#333333"
            },
            "line-width":2,
            "font-family":"Helvetica",
            "color":"#333333"
        },
        "plotarea":{
            "margin-top":80,
            "margin-left":70,
            "margin-right":30
        },
        "scale-x":{
            "tick":{
                "line-gap-size":0,
                "line-color":"#cccccc",
                "line-width":1,
                "size":10
            },
            "font-size":16,
            "line-color":"#cccccc",
            "bold":true,
            "item":{
                "font-size":11,
                "font-family":"Helvetica",
                "color":"#333333"
            },
            "guide":{
                "line-width":0
            },
            "label":{
                "color":"#333333"
            },
            "line-width":2,
            "font-family":"Helvetica",
            "color":"#333333"
        },
        "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"
        }
    }
]
}

CfChart堆积条形和未堆叠线条

2 个答案: