シリーズ下のデータに値を動的に追加する - echarts

Question

echartsを使用して棒グラフを作成しました。複数の値をデータオブジェクトに動的にバインドしたいのですが、現在は1つの値しかバインドできません。ここに私のJavaスクリプトです。私は完全に機能的なソリューションを望んで、これの初心者です。

var myChart = echarts.init(document.getElementById('page_views_today')); 

    var option = { 

     // Setup grid 
     grid: { 
      zlevel: 0, 
      x: 20, 
      x2: 40, 
      y: 20, 
      y2: 20, 
      borderWidth: 0, 
      backgroundColor: 'rgba(0,0,0,0)', 
      borderColor: 'rgba(0,0,0,0)', 
     }, 

     // Add tooltip 
     tooltip: { 
      trigger: 'axis', 
      axisPointer: { 
       type: 'shadow', // line|shadow 
       lineStyle: { color: 'rgba(0,0,0,.5)', width: 1 }, 
       shadowStyle: { color: 'rgba(0,0,0,.1)' } 
      } 
     }, 

     // Add legend 
     legend: { 
      data: [] 
     }, 
     toolbox: { 
      orient: 'vertical', 
      show: true, 
      showTitle: true, 
      color: ['#bdbdbd', '#bdbdbd', '#bdbdbd', '#bdbdbd'], 
      feature: { 
       mark: { show: false }, 
       dataZoom: { 
        show: true, 
        title: { 
         dataZoom: 'Data Zoom', 
         dataZoomReset: 'Reset Zoom' 
        } 
       }, 
       dataView: { show: false, readOnly: true }, 
       magicType: { 
        show: true, 
        itemSize: 12, 
        itemGap: 12, 
        title: { 
         line: 'Line', 
         bar: 'Bar', 
        }, 
        type: ['line', 'bar'], 
        option: { 
         /*line: { 
          itemStyle: { 
           normal: { 
           color:'rgba(3,1,1,1.0)', 
           } 
          }, 
          data: [1,2,3,4,5,6,7,8,9,10,11,12] 
         }*/ 
        } 
       }, 
       restore: { show: false }, 
       saveAsImage: { show: true, title: 'Save as Image' } 
      } 
     }, 

     // Enable drag recalculate 
     calculable: true, 

     // Horizontal axis 
     xAxis: [{ 
      type: 'category', 
      boundaryGap: false, 
      data: [ 
       '0h-2h', '2h-4h', '4h-6h', '6h-8h', '8h-10h', '10h-12h', '12h-14h', '14h-16h', '16h-18h', '18h-20h', '20h-22h', '22h-24h' 
      ], 
      axisLine: { 
       show: true, 
       onZero: true, 
       lineStyle: { 
        color: 'rgba(63,81,181,1.0)', 
        type: 'solid', 
        width: '2', 
        shadowColor: 'rgba(0,0,0,0)', 
        shadowBlur: 5, 
        shadowOffsetX: 3, 
        shadowOffsetY: 3, 
       }, 
      }, 
      axisTick: { 
       show: false, 
      }, 
      splitLine: { 
       show: false, 
       lineStyle: { 
        color: '#fff', 
        type: 'solid', 
        width: 0, 
        shadowColor: 'rgba(0,0,0,0)', 
       }, 
      }, 
     }], 

     // Vertical axis 
     yAxis: [{ 
      type: 'value', 
      splitLine: { 
       show: false, 
       lineStyle: { 
        color: 'fff', 
        type: 'solid', 
        width: 0, 
        shadowColor: 'rgba(0,0,0,0)', 
       }, 
      }, 
      axisLabel: { 
       show: false, 
      }, 
      axisTick: { 
       show: false, 
      }, 
      axisLine: { 
       show: false, 
       onZero: true, 
       lineStyle: { 
        color: '#ff0000', 
        type: 'solid', 
        width: '0', 
        shadowColor: 'rgba(0,0,0,0)', 
        shadowBlur: 5, 
        shadowOffsetX: 3, 
        shadowOffsetY: 3, 
       }, 
      }, 


     }], 

     // Add series 
     series: [ 
      { 
       name: 'Page Views', 
       type: 'bar', 
       smooth: true, 
       symbol: 'none', 
       symbolSize: 2, 
       showAllSymbol: true, 
       barWidth: 10, 
       itemStyle: { 
        normal: { 
         color: 'rgba(63,81,181,1.0)', 
         borderWidth: 2, borderColor: 'rgba(63,81,181,1)', 
         areaStyle: { color: 'rgba(63,81,181,1)', type: 'default' } 
        } 
       }, 

       data: [] 
      } 
     ] 
    }; 

ここで私は値を動的にバインドしたいと思う私のJavaスクリプト機能です。

// Load data into the ECharts instance 
    load_graph_with_positions(option); 

    function load_graph_with_positions(option) { 
      option.series[0].data[0] = 1234; 
     myChart.setOption(option); 
    } 

Answer 1

これを行う1つの方法は、値を配列に渡して、前の値をシフトしながらデータをプッシュインすることです。続いてshitingの一例であり、データをプッシュ：

option.series[0].data.shift(); 
option.series[0].data.push(json.num); 

したがって、あなたの関数になるだろう：

function load_graph_with_positions(option,values) { 
    var valuesLength = values.length; 
    for (var i = 0; i < valuesLength; i++) { 
     option.series[0].data.shift(); 
     option.series[0].data.push(values[i]); 
    } 
    myChart.setOption(option); 
} 

ます。また、動的な追加については、以下のgithubの例を参照することができます。 https://github.com/hisune/Echarts-PHP/blob/master/demo/dynamic.php