Question

我没有从谷歌搜索获得的解决方案。如何创建与app.expertoption.com相同的图表。我用Google搜索了最近2天。请帮我找出解决方案。我试过了Highcharts，但我没有得到我想要的输出。

<!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>

我正在使用上面的代码。

我目前的输出如下

但我希望获得如下输出。喜欢随时间变化的曲线。

Answer 1

造型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;
      }())
    }]
  });
});

Answer 2

我为你准备了一个类似的演示。我还修改了你的加载事件功能。您可以使用Series.addPoint（）函数添加新点并删除第一个（第三个参数设置为false），而不是创建第二个系列。

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

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

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

如何准确创建图表“https://app.expertoption.com”

2 个答案: