使用xAxis创建dhtmlxchart行系列作为muti值

时间:2015-02-03 02:19:57

标签: xml jsp charts dhtmlx

我会尝试使用各种持续时间数据的深度钻取的dhtmlxchart创建图表。但深度是yAxis,多系列持续时间数据是xAxis。

怎么做?

        var chart1 = cBox.attachChart({
        view :"line",
        container: "chart_div",
        value: "#Depth#",
        line: {
                    color: "#3399ff",
                    width: 3
                },
        xAxis: {
                    title: "Duration, days",
                    template: "#Avg#"
                },
        yAxis: {
                    start: 0,
                    end: 5000,
                    step: 250,
                    title: "Depth, m"
                  }
    });

    chart1.addSeries({
        value : "#Depth#",
        line:   {
                color : "#99ff33",
                width : 3
            },
        xAxis: {
                     template: "#P90#"
                },
                });

    chart1.parse(hdrChart);

,hdrChart的值是:

"<data>     
  <item id="1"> <Avg>0.899</Avg> <P90>3.887</P90><Depth>135</Depth> </item> 
<item id="2">   <Avg>3.981</Avg> <P90>15.845</P90>  <Depth>1550.0</Depth></item>
    <item id="3"><Avg>5.563</Avg> <P90>22.219</P90> <Depth>1550.0</Depth>   </item>
<item id="4">   <Avg>9.364</Avg><P90>44.849</P90>   <Depth>4059.0</Depth>   </item> 
<item id="5">   <Avg>9.023</Avg><P90>43.939</P90>   <Depth>4059.0</Depth>   </item>
<item id="6">   <Avg>10.919</Avg><P90>54.814</P90>  <Depth>4059.0</Depth>   </item>
<item id="7">   <Avg>14.803</Avg><P90>76.578</P90>  <Depth>4473.0</Depth>   </item>
<item id="8">   <Avg>15.691</Avg><P90>79.939</P90>  <Depth>4473.0</Depth>   </item>
<item id="9">   <Avg>17.235</Avg><P90>86.544</P90>  <Depth>4473.0</Depth>   </item>
<item id="10">  <Avg>18.264</Avg><P90>88.872</P90>  <Depth>4473.0</Depth>   </item>  </data>"

仅绘制了p90。

1 个答案:

答案 0 :(得分:0)

不幸的是,在一张图表中不可能使用不同的比例。似乎你不需要系列。您可以尝试绘制一个将深度显示为值的折线图。 Avg和P90可以在xAxis标签中显示:

var chart1 = cBox.attachChart({
   view :"line",
   container: "chart_div",
   value: "#Depth#",
   line: {
       color: "#3399ff",
       width: 3
   },
   xAxis: {
       title: "Duration, days",
       template: "#Avg#<br/>#P90#"
   },
   yAxis: {
       start: 0,
       end: 5000,
       step: 250,
       title: "Depth, m"
   }
});
chart1.parse(hdrChart);