12

私は現在、商用プロジェクトの潜在的なリスク要因を計算するインタラクティブなチャートに取り組んでいます。これにはBaidu EChartsを使用しており、グラフは視覚的に機能していますが、データが変更されたときにグラフを更新できません。

データは、値のラジオボタンとセット全体のオンとオフを切り替えるチェックボックスを使用する外部アンケートから取得されます。

 <input type="checkbox" id="GPEbool" value="true"> Example Question 1</h4>
    <form action="">
  <input type="radio" id="polishedness" value="1"> Idea<br>
  <input type="radio" id="polishedness" value="1"> Concept<br>
  <input type="radio" id="polishedness" value="2"> Mockup<br>
  <input type="radio" id="polishedness" value="5"> Prototype<br>
  <input type="radio" id="polishedness" value="7"> Playable<br>
  <input type="radio" id="polishedness" value="15"> Polish<br>
  <input type="radio" id="polishedness" value="30"> Finished<br>
</form>

さて、問題はデータをグラフに取り込むことです。最初に選択された値を正しく取得しますが (それらの 1 つに「チェック済み」を追加すると)、その後は更新されません。

data: [{ value: $('input[name=polishedness]:checked').val(), name: 'Design'}]

何かが変更されるたびにリフレッシュ関数を呼び出してみましたが、リフレッシュは関数ではありません。私は本当に途方に暮れており、中国語のドキュメントはあまり役に立ちません:)

助言がありますか？前もって感謝します！

4

3 に答える 3

26

chartInstance.setOption()新しいデータで再度呼び出す必要があります。

私はあなたに小さな例を挙げます：

// eChart is the chart instance!
echart.setOption({
   // .... some configuration
   series: [
       {
           type: "line",
           name: "test",
           data: [1,2,3,4,5,6]
       }
   ]
})

選択ボックスの値を変更した後、そのイベントをキャッチし、構成オブジェクトの値を変更して、再度呼び出す 必要があります。chartInstance.setOption()

したがって、完全な構成オブジェクトを保存し、そこに変更を保存することをお勧めする場合があります。

于 2016-12-14T11:56:12.090 に答える
3

Angular を使用している場合は、 [merge] オプションを使用して、チャートを値の変更に応答させることもできます。

<div echarts [options]="initialValue" [merge]= "dynamicData" class="demo-chart"></div>

参考：https ://github.com/xieziyu/ngx-echarts#api

モジュールで、以下のように初期値を割り当てます。

  initialValue: EChartOption = {
xAxis: {
  type: 'time',
  splitNumber : 20
},
yAxis: {
  type: 'value',
  name : '$',
  nameLocation: 'middle'
},
series: [{
  data : [],
  type: 'line'
}]

}

データに基づいて動的値を設定し、外部サービスへの API 呼び出しを行う前に「this.dynamicData」も初期化します

 formDataforChart(backTestTrades) {
    let i = 0;
    for(let backTestTrade of backTestTrades){
       let profitAndTime = [];
       profitAndTime.push(backTestTrade.exitTime);
       profitAndTime.push(backTestTrade.profitOrLoss);
       this.eChartDataSeries.push(profitAndTime);
    }
    let data = {
      data : this.eChartDataSeries,
      type : 'bar'
    };
    this.dynamicData=this.initialValue;
    this.dynamicData.series = [];
    // Applying my dynamic data here
    this.dynamicData.series.push(data);  
  }
于 2020-04-19T18:14:50.183 に答える