jQWidgets jqxChart 完整参考

什么是 jQWidgets jqxChart？

jQWidgets jqxChart 是一个基于 jQuery 的图表插件，用于创建各种类型的图表，如线图、柱状图、饼图等。它提供了丰富的选项和配置，可以轻松地改变图表的外观和行为。jQWidgets jqxChart 还支持多个数据系列、标签、工具提示等。

安装和使用

jQWidgets jqxChart 可以通过 npm 安装：

npm install jqwidgets-framework --save

然后可以在 HTML 文件中引入 jqxwidgets：

<link rel="stylesheet" href="node_modules/jqwidgets-framework/jqwidgets/styles/jqx.base.css" />
<script src="node_modules/jqwidgets-framework/jqwidgets/jqxcore.js"></script>
<script src="node_modules/jqwidgets-framework/jqwidgets/jqxdata.js"></script>
<script src="node_modules/jqwidgets-framework/jqwidgets/jqxchart.core.js"></script>

在 JavaScript 文件中可以使用以下代码初始化 jqxChart：

$(document).ready(function () {
    // 准备数据
    var source = {
        datatype: "csv",
        datafields: [
            { name: 'Date' },
            { name: 'S&P 500' },
            { name: 'NASDAQ' }
        ],
        url: 'data.csv'
    };

    // 创建图表
    $("#chartContainer").jqxChart({
        title: "Stock Market Performance",
        description: "Comparison between U.S. stock market indexes.",
        enableAnimations: true,
        showLegend: true,
        padding: { left: 10, top: 5, right: 10, bottom: 5 },
        titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
        source: source,
        colorScheme: 'scheme01',
        seriesGroups: [
            {
                type: 'line',
                valueAxis: {
                    unitInterval: 50,
                    title: { text: 'Index Value' },
                    labels: { horizontalAlignment: 'right' }
                },
                series: [
                    { dataField: 'S&P 500', displayText: 'S&P 500', lineWidth: 2 },
                    { dataField: 'NASDAQ', displayText: 'NASDAQ', lineWidth: 2 }
                ]
            }
        ]
    });
});

以上代码创建了一个折线图，用于比较美国股市指数的表现。它通过 CSV 文件中的数据源进行填充，并使用启用动画、显示图例等功能。

jQWidgets jqxChart 参考文档

jQWidgets jqxChart 支持各种类型的图表和选项。以下是一些常用的选项和图表类型：

图表类型

• line：折线图
• spline：光滑的折线图
• stepLine：阶梯线图
• area：区域图
• splineArea：光滑的区域图
• stepArea：阶梯区域图
• column：柱状图
• stackedColumn：堆积柱状图
• stackedColumn100：总和为 100% 的堆积柱状图
• bar：条形图
• stackedBar：堆积条形图
• stackedBar100：总和为 100% 的堆积条形图
• pie：饼图
• donut：圆环图
• scatter：散点图
• bubble：气泡图

常用选项

• title：图表标题
• description：图表描述
• enableAnimations: 启用或禁用动画
• showLegend：显示或隐藏图例
• padding：设置图表的内边距
• titlePadding：设置图表标题的内边距
• source：图表数据源
• colorScheme：图表颜色方案
• valueAxis：值轴选项
• categoryAxis：分类轴选项
• seriesGroups：数据系列选项

更多详细的选项和图表类型，请参阅 jQWidgets jqxChart 官方文档。