web-dev-qa-db-ja.com

EChartsはデータ変更時にリフレッシュします

私は現在、商業プロジェクトの潜在的なリスクファクターを計算するインタラクティブチャートに取り組んでいます。私はこれに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>

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

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

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

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

refreshbaiduecharts
6
Sonioo

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

小さな例を挙げましょう。

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

変更後選択ボックスの値を変更した場合、そのイベントをキャッチし、構成オブジェクトの値を変更してcallchartInstance.setOption()再び。

したがって、完全な設定オブジェクトを保存し、そこに変更を保存することをお勧めします。

17
Mijago

たとえば、resize（）メソッドを使用できます。

window.chartRadar = echarts.init(document.getElementById('echartId'));
window.chartRadar.setOption({
        title: {
            text: 'radar echart'
        },
        tooltip: {},
        legend: {
            data: ['data1', 'data2']
        },
        radar: {
            // shape: 'circle',
            name: {
                textStyle: {
                    color: '#fff',
                    backgroundColor: '#999',
                    borderRadius: 3,
                    padding: [3, 5]
               }
            },
            indicator: [
               { name: 'sales', max: 6500},
               { name: 'Administration', max: 16000},
               { name: 'Information Techology', max: 30000},
               { name: 'Customer Support', max: 38000},
               { name: 'Development', max: 52000},
               { name: 'Marketing', max: 25000}
            ]
        },
        series: [{
            name: 'Budget vs spending',
            type: 'radar',
            // areaStyle: {normal: {}},
            data : [
                {
                    value : [4300, 10000, 28000, 35000, 50000, 19000],
                    name : 'data1'
                },
                 {
                    value : [5000, 14000, 28000, 31000, 42000, 21000],
                    name : 'data2'
                }
            ]
        }]
    });

クラウドをすでにechartにしたら、たとえば、「resize（）」メソッドを使用して、echarを再描画します。

window.chartRadar.resize();
1
Ing Oscar MR