最新公告
  • 欢迎您光临码农资源网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!加入我们
  • 如何使用 FusionCharts.js 创建您的第一个图表?

    如何使用 fusioncharts.js 创建您的第一个图表?

    FusionCharts 是一个 JavaScript 库,当您想要创建图表和地图并将其放入您的 Web 中时可以使用它应用。在本教程中,我们将展示如何使用 FusionChart.js 创建两个不同的图表。

    在学习如何创建图表之前,第一件重要的事情是了解如何将 FusionCharts 安装到本地计算机上。

    安装FusionCharts

    我们可以通过多种方式安装 FusionCharts。

    使用 CDN

    您可以使用下面给出的CDN链接直接访问FusionCharts的文件。

    <script src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
    

    从 NPM 安装

    您可以使用 NPM 将库作为依赖项安装到代码中。使用以下命令安装FusionCharts。

    npm install --save fusioncharts
    

    上述命令会将 FusionCharts 保存为项目中的 dev 依赖项。

    既然我们知道了如何安装 FusionCharts,那么让我们来探讨一下我们将使用 FusionCharts 创建的几个图表示例。

    示例 1

    第一个示例是一个简单的条形图,我们将在 FusionCharts 的帮助下创建它,该图按国家/地区描述了亿万富翁的数量。考虑下面所示的代码。

    index.html

    <html>
    <head>
       <title>FusionChart Example - 1</title>
       <script type="text/javascript"src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
       <script type="text/javascript"src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
       <script type="text/javascript">
          const chartData = [{
             "label": "United States","value": "735"
          }, {
                "label": "Mainland China","value": "539"
          }, {
                "label": "India", "value": "166"
          }, {
                "label": "Germany", "value": "134"
          }, {
                "label": "Russia", "value": "83"
          }, {
                "label": "Hong Kong", "value": "67"
          }, {
                "label": "Canada", "value": "64"
          }, {
                "label": "Brazil", "value": "62"
          }, {
                "label": "Italy", "value": "52"
          }, {
                "label": "Taiwan", "value": "51"
          }];
          const chartConfig = {
             type: 'column2d',
             renderAt: 'chart-container',
             width: '100%',
             height: '400',
             dataFormat: 'json',
             dataSource: {
                // Configuration of Chart
                "chart": {
                   "caption": "Billionares By Country Wise[2022]",
                   "subCaption": "According to Forbes",
                   "xAxisName": "Country",
                   "yAxisName": "Billionares",
                   "theme": "fusion",
                },
                // Actual Chart Data
                "data": chartData
             }
          };
          FusionCharts.ready(function() {
             var fusioncharts = new FusionCharts(chartConfig);
             fusioncharts.render();
          });
       </script>
    </head>
    <body>
       <div id="chart-container">FusionCharts!!</div>
    </body>
    </html>
    

    如果我们在浏览器中运行上述代码,我们将得到一个绘制为输出的条形图。

    说明

    在此代码中,我们首先创建了一个 JSON 数据,我们将在创建 FusionChart 对象的实例时将其传递到 chartConfig 的“data”属性中。

    除此之外,“chartConfig”对象中还存在一些属性,尤其是“chart”属性,其中我们有不同的子属性,例如 caption、subCaption,这些属性在以下情况下都是必需的:我们正在绘制一个条形图。

    示例 2

    在上面的示例中,我们使用简单的 JSON 数据创建了一个条形图,并将其呈现给浏览器。在下面的示例中,我们将创建一个更复杂的图表,其中我们将描绘具有多个块的融合图表。考虑下面所示的代码。

    index.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
       <meta charset="UTF-8">
       <meta http-equiv="X-UA-Compatible" content="IE=edge">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <script type="text/javascript"src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
       <script type="text/javascript"src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
    <title>FusionChart - Example 2</title>
    </head>
    <body>
       <div id="chart-container">For Rendering!!</div>
       <script>
          FusionCharts.ready(function() {
             var conversionChart = new FusionCharts({
                type: 'bubble',
                renderAt: 'chart-container',
                width: '600',
                height: '450',
                dataFormat: 'json',
                dataSource: {
                   "chart": {
                      "theme": "fusion",
                      "caption": "Sales Analysis of Mobile Devices Brands",
                      "subcaption": "Last Quarter",
                      "xAxisMinValue": "0",
                      "xAxisMaxValue": "100",
                      "yAxisMinValue": "0",
                      "yAxisMaxValue": "300000",
                      "xAxisName": "Average Price",
                      "yAxisName": "Units Sold",
                      "numDivlines": "2",
                      "showValues": "1",
                      "showTrendlineLabels": "0",
                      "plotTooltext": "$name : Profit Contribution - $zvalue%",
                      "drawQuadrant": "1",
                      "quadrantLineAlpha": "80",
                      "quadrantLineThickness": "3",
                      "quadrantXVal": "50",
                      "quadrantYVal": "15000",
                      "quadrantLabelTL": "Low Price / High Sale",
                      "quadrantLabelTR": "High Price / High Sale",
                      "quadrantLabelBL": "Low Price / Low Sale",
                      "quadrantLabelBR": "High Price / Low Sale",
                      "yAxisLineThickness": "1",
                      "yAxisLineColor": "#999999",
                      "xAxisLineThickness": "1",
                      "xAxisLineColor": "#999999",
                      "theme": "fusion"
                      },
                      "categories": [{
                         "category": [{
                            "label": "$50",
                            "x": "0"
                         },{
                            "label": "$100",
                            "x": "20",
                            "showverticalline": "1"
                         },{
                            "label": "$150",
                            "x": "40",
                            "showverticalline": "1"
                         },{
                            "label": "$200",
                            "x": "60",
                            "showverticalline": "1"
                         },{
                            "label": "$250",
                            "x": "80",
                            "showverticalline": "1"
                         }, {
                            "label": "$300",
                            "x": "100",
                            "showverticalline": "1"
                            }
                         ]
                      }],
                      "dataset": [{
                         "color": "#00aee4",
                         "data": [{
                            "x": "35",
                            "y": "1500000",
                            "z": "24",
                            "name": "Xiaomi"
                         },{
                            "x": "80",
                            "y": "1850000",
                            "z": "26",
                            "name": "Samsung"
                         },{
                            "x": "45",
                            "y": "1945000",
                            "z": "19",
                            "name": "Nokia"
                         },{
                            "x": "65",
                            "y": "10500",
                            "z": "8",
                            "name": "OnePlus"
                         },{
                            "x": "100",
                            "y": "905000",
                            "z": "5",
                            "name": "Apple"
                         },{
                            "x": "32",
                            "y": "2200000",
                            "z": "10",
                            "name": "Asus"
                         },{
                            "x": "44",
                            "y": "1300000",
                            "z": "9",
                            "name": "Vivo"
                         }
                      ]
                   }],
                   "trendlines": [{
                      "line": [{
                         "startValue": "20000",
                         "endValue": "30000",
                         "isTrendZone": "1",
                         "color": "#aaaaaa",
                         "alpha": "14"
                      },{
                         "startValue": "10000",
                         "endValue": "20000",
                         "isTrendZone": "1",
                         "color": "#aaaaaa",
                         "alpha": "7"
                      }
                   ]
                }],
                "vTrendlines": [{
                   "line": [{
                      "startValue": "44",
                      "isTrendZone": "0",
                      "color": "#0066cc",
                      "thickness": "1",
                      "dashed": "1",
                      "displayValue": "Gross Avg."
                   }]
                }]
             }
          });
          conversionChart.render();
       });
       </script>
    </body>
    </html>
    

    使用“编辑并运行”按钮运行此代码并查看输出。它将显示具有多个象限的图。

    说明

    在此示例中,我们尝试借助 FusionCharts 描绘多家移动设备公司的销售额。

    这里,“数据集”属性包含我们将在图表中显示的实际 JSON 数据,而“类别”包含 X 轴和 Y 轴坐标的数据。

    结论

    在本教程中,我们使用了几个示例来演示如何利用 FusionCharts 库中的可用功能在 JavaScript 中创建不同的图表。

    想要了解更多内容,请持续关注码农资源网,一起探索发现编程世界的无限可能!
    本站部分资源来源于网络,仅限用于学习和研究目的,请勿用于其他用途。
    如有侵权请发送邮件至1943759704@qq.com删除

    码农资源网 » 如何使用 FusionCharts.js 创建您的第一个图表?
    • 5会员总数(位)
    • 22375资源总数(个)
    • 770本周发布(个)
    • 77 今日发布(个)
    • 176稳定运行(天)

    提供最优质的资源集合

    立即查看 了解详情