我怎樣才能完全創建一個圖表「https://app.expertoption.com」

-2

我沒有從谷歌搜索得到的解決方案。我如何創建一個與app.expertoption.com相同的圖表。我在過去兩天內被Google搜索了一遍。請幫我找出解決方案。我試過Highcharts，但我沒有得到我想要的輸出。我怎樣才能完全創建一個圖表「https://app.expertoption.com」

<!DOCTYPE html> 
     <html lang="en"> 
     <head> 
      <meta charset="UTF-8"> 
      <title>Title</title> 
      <style> 
       /*#container {*/ 
        /*height:100%;*/ 
        /*width:100%;*/ 
        /*position:absolute;*/ 
       /*}*/ 
      </style> 
     </head> 
     <body> 

     <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> 


     <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
     <script src="https://code.highcharts.com/stock/highstock.js"></script> 
     <!--<script src="code/highcharts.js"></script>--> 
     <script src="http://code.highcharts.com/modules/exporting.js"></script> 
     <script src="code/js/themes/dark-unica.js"></script> 

     <script type="text/javascript"> 

      $(function() { 

     //  var newh = $("#container").height(); 
     // 
     //  $(window).resize(function() { 
     // 
     //   newh = $("#container").height(); 
     //   chart1.redraw(); 
     //   chart1.reflow(); 
     //  }); 

       $('#container').highcharts({ 
        chart: { 
         type: 'line', 
         events: { 
          load: function() { 
           if(this.plotBackground) { 
            this.plotBackground.toFront().css({ 
             cursor: "crosshair" 
            }); 
           } 
           var series = this.series[0], 
            len  = series.data.length; 
           this.addSeries({ 
            id: 'end point', 
            type: 'scatter', 
            marker: { 
             enabled:true, 
             symbol:'circle', 
             radius:4, 
             fillColor:'green', 
             lineWidth:1 
            }, 
            data: [[ 
             series.data[len - 1].x, 
             series.data[len - 1].y 
            ]] 
           }); 
           var series2 = this.get('end point'); 

           setInterval(function() { 
            var x = (new Date()).getTime(), 
             y = Math.random(); 
            len = series.data.length; 
            series.addPoint([x,y], true, true); 
            series2.data[0].update([x,y]); 
           }, 1000); 
          } 
         } 
        }, 
        rangeSelector: { 
         selected: 3 
        }, 
        xAxis: { 
         type: "datetime", 
         dateTimeLabelFormats: { 
          day: '%H' 
         }, 
         tickInterval: 1000 * 60 
        }, 
        yAxis: { 
         plotLines: [{ 
          value: 0, 
          width: 1, 
          color: '#808080' 
         }], 
         title: { 
          text: null 
         } 
        }, 
        tooltip: { 
         formatter: function() { 
          return Highcharts.numberFormat(this.y, 2); 
         } 
        }, 
        legend: { 
         enabled: false 
        }, 
        exporting: { 
         enabled: false 
        }, 
        plotOptions: { 
         series: { 
          lineWidth: .5 
         } 
        }, 
        series: [{ 
         name: 'Random data', 
         data: (function() { 
          // generate an array of random data 
          var data = [], 
           time = (new Date()).getTime(), 
           i; 

          for (i = -Math.round(Math.random()*1000) + 1; i <= 0; i += 1) { 
           data.push({ 
            x: time + i * 1000, 
            y: Math.round(Math.random()*10) + 1 
           }); 
          } 
          return data; 
         }()) 
        }] 
       }); 
      }); 



     </script> 

     </body> 
     </html>

我正在使用上面的代碼。

我的電流輸出低於

但我想輸出像下面。就像時間的曲線一樣。

來源

2017-07-24 Tareq Aziz

究竟是什麼輸出你期待，你沒有得到？ –

@BarbaraLaird我期待這樣的輸出app.expertoption.com –

你需要更具體。你是否在製作曲線而不是線條上存在問題，是否存在透明度問題，想要將圖像添加到數據點等？目前，你的問題太廣泛了，很可能會被關閉。 –

造型Highcharts很容易。請參閱他們的優秀文檔：http://api.highcharts.com/highcharts/chart。

這段代碼讓你更接近你試圖實現的外觀。您引用的網站不使用Highcharts，它是一個畫布動畫。你應該能夠實現類似的外觀，但它不會完全相同。

最重要的部分是：

type: 'areaspline', - 這讓你與區域下方

series: [{ 
    name: 'Random data', 
    fillOpacity: .25, // This makes the area under the curve transparent 
    lineWidth: 2, 
    marker: { 
    enabled: false, // This gets rid of markers on the line 
    },

https://jsfiddle.net/97p9tu6t/3/

$(function() { 
    $('#container').highcharts({ 
    chart: { 
     backgroundColor: 'rgb(36,44,61)', 
     style: { 
     fontFamily: '\'Unica One\', sans-serif' 
     }, 
     plotBorderColor: '#606063', 

     type: 'areaspline', 
     events: { 
     load: function() { 
      var series = this.series[0], 
      len = series.data.length; 
      this.addSeries({ 
      id: 'end point', 
      type: 'scatter', 
      marker: { 
       enabled: true, 
       symbol: 'circle', 
       radius: 4, 
       fillColor: 'white', 
       lineColor: 'rgba(255,255,255,.5)', 
       lineWidth: 10 
      }, 
      data: [ 
       [ 
       series.data[len - 1].x, 
       series.data[len - 1].y 
       ] 
      ] 
      }); 
      var series2 = this.get('end point'); 

      setInterval(function() { 
      var x = (new Date()).getTime(), 
       y = Math.random(); 
      len = series.data.length; 
      series.addPoint([x, y], true, true); 
      series2.data[0].update([x, y]); 
      }, 1000); 
     } 
     } 
    }, 
    rangeSelector: { 
     selected: 3 
    }, 
    xAxis: { 
     type: "datetime", 
     dateTimeLabelFormats: { 
     day: '%H' 
     }, 
     tickInterval: 1000 * 60, 

    }, 
    yAxis: { 
     title: { 
     text: null 
     }, 
     gridLineColor: 'rgb(35,65,89)', 
     min: 0, 
     max: 1 
    }, 
    tooltip: { 
     formatter: function() { 
     return Highcharts.numberFormat(this.y, 2); 
     } 
    }, 
    legend: { 
     enabled: false 
    }, 
    exporting: { 
     enabled: false 
    }, 
    plotOptions: { 
     series: { 
     lineWidth: .5 
     } 
    }, 
    series: [{ 
     name: 'Random data', 
     fillOpacity: .25, 
     lineWidth: 2, 
     marker: { 
     enabled: false, 
     }, 
     data: (function() { 
     // generate an array of random data 
     var data = [], 
      time = (new Date()).getTime(), 
      i; 

     for (i = -Math.round(Math.random() * 10) + 1; i <= 0; i += 1) { 
      data.push({ 
      x: time + i * 10, 
      y: Math.random() 
      }); 
     } 
     return data; 
     }()) 
    }] 
    }); 
});

來源

2017-07-24 20:43:05

非常感謝你的幾乎解決了我的問題。我正在嘗試使用您的解決方案來獲得更多關閉。 –

如何生成大量數據並顯示如下http://prntscr.com/fzuhoo。 for循環無法正常工作。你對這個PLZ –

有任何建議你的意思是「for循環無法正常工作」？ https://jsfiddle.net/97p9tu6t/4/。 –

我準備了一個類似的演示你的曲線。我也修改了你的加載事件函數。您可以使用Series.addPoint（）函數添加一個新點並刪除第一個點（將第三個參數設置爲false），而不是創建第二個系列。

series.addPoint([x, y], true, true, { 
    duration: 1000 
});

API參考：
http://api.highcharts.com/highcharts/Series.addPoint

例子：
http://jsfiddle.net/5s5L5ek9/

來源

2017-07-25 11:59:14

我怎樣才能完全創建一個圖表「https://app.expertoption.com」

回答

相關問題