jQWidgets jqxChart update() 方法

介绍

jQWidgets 是一个专业级的 jQuery 插件集合，为 web 开发者提供了一套完整的 ui 组件及工具库。其 jqxChart 组件是一款功能强大的图表插件，支持多种图表类型，包括线性图、柱状图、饼图等。update() 方法是 jqxChart 组件提供的一个函数，用于更新图表数据。

用法

update() 方法可以用于以下两种场景：

• 更新整个数据源

  在调用 update() 方法时，可以传入一个新的数据源对象，用于更新 jqxChart 组件的数据。更新后，图表将重新渲染，以显示最新的数据。以下是 update() 方法的基本用法：

  var chartData = [
      { Date: 'January', Sales: 42000, Expenses: 46752 },
      { Date: 'February', Sales: 46000, Expenses: 49312 },
      { Date: 'March', Sales: 58000, Expenses: 56812 },
      { Date: 'April', Sales: 65400, Expenses: 68312 },
      { Date: 'May', Sales: 72000, Expenses: 73012 },
      { Date: 'June', Sales: 80000, Expenses: 84512 }
  ];
  
  // 初始化 jqxChart 组件
  var chart = $('#jqxChart').jqxChart({
      title: { text: 'Sales & Expenses' },
      description: { text: 'for the year 2020' },
      source: chartData,
      seriesGroups: [
          {
              type: 'column',
              series: [
                  { dataField: 'Sales', displayText: 'Sales' },
                  { dataField: 'Expenses', displayText: 'Expenses' }
              ]
          }
      ]
  });
  
  // 更新数据源
  var newChartData = [
      { Date: 'January', Sales: 48000, Expenses: 53752 },
      { Date: 'February', Sales: 52000, Expenses: 57312 },
      { Date: 'March', Sales: 62000, Expenses: 63812 },
      { Date: 'April', Sales: 72400, Expenses: 75312 },
      { Date: 'May', Sales: 82000, Expenses: 85012 },
      { Date: 'June', Sales: 92000, Expenses: 96512 }
  ];
  
  chart.jqxChart('update', newChartData);
  

• 更新单个数据项

  另一种常见的用法是只更新单个数据项，而不是整个数据源。在此情况下，可以使用 update() 方法的另一个重载，它接收三个参数：series 索引、点索引和新值。以下示例演示如何更新柱状图中的单个数据点：

  // 更新柱状图中第一个系列的第一个点的值
  chart.jqxChart('update', 0, 0, 55000);
  

注意事项

必须在 jqxChart 组件被初始化之后才能调用 update() 方法。如果您需要使用 update() 方法来更新数据源，建议在组件首次加载时就传入一个初始数据源，并将其保存在变量中。这样，您就可以随时更新数据源，而不必重新渲染整个图表。

参考资料

• jqxChart API 文档