[WeChat ミニ プログラム] wxCharts を初期化し、updateData を呼び出してデータを動的に更新します

wxCharts を初期化するには、次の手順に従う必要があります。

1. まず、wx-charts.js ファイルがアプレットの対応するページまたはコンポーネントに正しく導入されていることを確認します。次のような方法で導入できます。

const wxCharts = require('../../../../components/wx-charts.js');

プロジェクトの構造と実際のパスに基づいて、対応する調整を行ってください。

2. ページまたはコンポーネントの onLoad ライフサイクル関数で、チャート インスタンスを作成し、必要な構成パラメーターを渡します。サンプルコードは次のとおりです。

onLoad: function() {
    
    
  const lineChart = new wxCharts.LineChart({
    
    
    canvasId: 'lineCanvas', // 绑定的 canvas-id
    dataPointShape: true, // 是否显示数据点图形
    xAxis: {
    
    
      // x 轴配置
      disableGrid: true // 是否禁用 x 轴网格线
    },
    yAxis: {
    
    
      // y 轴配置
      min: 0 // y 轴最小值
    },
    series: [{
    
    
      name: '系列1', // 数据系列名称
      data: [15, 20, 45, 37, 50], // 数据数组
      format: function(val) {
    
    
        return val.toFixed(2); // 数据格式化回调函数
      }
    }],
    width: 320, // 图表宽度（单位为 px）
    height: 200 // 图表高度（单位为 px）
  });

  // 可以在此处调用 chart.updateData() 添加更多数据

  // 将图表实例保存到 data 中，方便后续操作
  this.setData({
    
    
    lineChart: lineChart
  });
},

この例では、LineChart インスタンスを作成し、必要な構成パラメーターを渡します。これらには、canvasId (バインドされたキャンバス ID)、データ系列 (series)、X 軸構成 (xAxis)、Y 軸構成 (yAxis)、グラフの幅と高さなどが含まれます。

実際のニーズと wxCharts が提供する構成オプションに基づいて、対応する調整を行うことができます。特定の構成オプションは、LineChart、BarChart、PieChart などのさまざまなグラフの種類に応じて異なる場合があることに注意してください。

3. チャート インスタンスの作成後にデータを動的に更新する必要がある場合は、updateData()メソッドを呼び出すことができます。例えば：

const newData = [25, 30, 55, 47, 60];
this.data.lineChart.updateData({
    
    
  series: [{
    
    
    name: '系列1',
    data: newData
  }]
});

この例では、newData が新しいデータ配列であると仮定し、updateData()チャートのデータはメソッドを呼び出すことによって更新されます。

上記のコード例の CanvasId、データ配列、その他の構成は、実際の状況に応じてカスタマイズする必要があることに注意してください。それでも問題が発生する場合は、問題をより正確に分析して解決できるように、より関連性の高いコードとエラー情報を提供してください。