extjs - Ext js 自定义图表

Question

我正在使用 ExtJS 来显示图表。我想使用散点图，其中轴应该在中间，而不是默认轴。

为此，我尝试将轴 x 和 y 相应地放置在面板的中间，并在该面板中以绝对布局绘制没有轴的图表。我知道这可能不是正确的做法。请建议我如何做到这一点。

提前致谢。

Answer 1

我正在使用 FusionCharts。这是一个示例，我如何在我的 Extjs 页面中使用它（EXTJS Ver. 3.4.1）

对于执行以下示例，您必须下载 FusionCharts。之后，将“Column2D.swf”复制到您的根目录。

1. 将 .js 文件添加到您的 .php 或 .html 页面

   <script type="text/javascript" src="js/utility/FusionCharts.js"></script>
   <script type="text/javascript" src="js/chartdata/chartdata.js" ></script>
   

2. 使用您的数据创建 .js 文件。（这里我们有'chartdata.js'）

   var dataStringCredit ='<chart baseFontSize="12" baseFont="Arial,Helvetica,sans-serif" xAxisName="Top 5 Products Using Invoiced Sales Dollers for Last 12 Months" alternateVGridColor="AFD8F8" baseFontColor="114B78" toolTipBorderColor="114B78" toolTipBgColor="E7EFF6" useRoundEdges="1" showBorder="0" bgColor="FFFFFF,FFFFFF">\n\
           <set label="ABC" value="23" color="AFD8F8"/> \n\
           <set label="123" value="12" color="F6BD0F"/> \n\
           <set label="XYZ" value="17" color="8BBA00"/> \n\
           <set label="MNO" value="14"  color="A66EDD"/> \n\
           <set label="789" value="12"  color="F984A1"/>\n\
   </chart>';
   

3. 在您的 .js 文件中，当您想要添加/调用/显示图表时。

   A. 在页面开头添加此数据。

   FusionCharts.setCurrentRenderer('javascript'); 
                               var paymentchart = new FusionCharts("Column2D.swf", "ChartId_flash", "440", "400", "0", "1" );
                               paymentchart.setXMLData( dataStringCredit );
                               paymentchart.render("divagingchart");
   

   B. Add This Where 图表显示。

   items:[{
       html: '<div id="divagingchart"></div>'
   }]
   

4. 你的图表看起来像这样。