私はx軸が30分の事前定義された間隔であるリアルタイムの日中チャートが必要です

Question

私はリアルタイムチャートで作業しています。私は事前に定義されたx軸を9：30,10：00,10：30、 11：00,11：30,12：00,12：30

とし、Dbからのデータを[x、y]値として、チャート上の加算点としてそれぞれ取ります。のようなデータ[10：24,350]は、チャートを正しく指し示す必要があります。

$(function() { 
    //end = (new Date()).getTime() + 100000; 
    $.getJSON('/Charts/Get/Home.aspx', function (data) { 
     var d = new Date(); 
     var o = d.getFullYear() + '/' + (d.getMonth() + 1) + '/' + d.getDate(); 
     var p = new Date(o).getTime(); 
     Highcharts.stockChart('chartContainer', { 
      chart: { 
       events: { 
        load: function() { 
         // set up the updating of the chart each second 
         var series = this.series[0]; 
         setInterval(function() { 
          requestData(series); 
         }, 60000); 
        } 
       } 
      }, 
      scrollbar: { 
       enabled: false 
      }, 
      xAxis: { 
       tickInterval: 3600 * 1000, 
       min: min.getUTCDate(), 
       max: Date.UTC(2016, 12, 19), 
       type: 'datetime', 
       startOnTick: false, 
       endOnTick: false, 
       ordinal: false, 
       dateTimeLabelFormats: { 
        day: '%M' 
     } 
      }, 
      navigator: { enabled: false }, 
      title: { 
       text: 'Interactive Chart' 
      }, 
      exporting:{ 
       enabled: false 
      }, 
      rangeSelector: { 
       enabled: false 
      }, 

      series: [{ 
       name: '', 
       type: 'line', 
       data: data, 
       tooltip: { 
        valueDecimals: 2 
       }, 
       fillColor: { 
        linearGradient: { 
         x1: 0, 
         y1: 0, 
         x2: 0, 
         y2: 1 
        }, 
        stops: [ 
         [0, Highcharts.getOptions().colors[0]], 
         [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')] 
        ] 
       }, 

      }] 
     }); 
    }); 
});[1] 

like this chart

Answer 1

today = new Date(); 
         dd = today.getUTCDate(); 
         mm = today.getUTCMonth() + 1; 
         yyyy = today.getUTCFullYear(); 
         min = yyyy + '-' + mm + '-' + dd + ' 15:00:00'; 
         max = yyyy + '-' + mm + '-' + dd + ' 18:00:00'; 
         d = new Date(Date.parse(min)); 
         m = d.getTime(); 
         e = new Date(Date.parse(max)); 
         n = e.getTime() 

         var chart; // global 
         function requestData(series) { 
          $.ajax({ 
           url: '/Charts/Get/Home.aspx?r=upd', 
           success: function (point) { 
            point = $.parseJSON(point) 
            shift = series.data.length > 20; // shift if the series is 
            series.addPoint(point, true, shift); 
           }, 
           cache: false 
          }); 
         } 

         $(function() { 
          $.getJSON('/Charts/Get/Home.aspx', function (data) { 
           Highcharts.stockChart('chartContainer', { 
            chart: { 
             events: { 
              load: function() { 
               var series = this.series[0]; 
               setInterval(function() { 
                requestData(series); 
               }, 60000); 
              } 
             } 
            }, 
            xAxis: { 
             type: 'datetime', 
             tickInterval: 0.5 * 3600 * 1000, 
             minorTickInterval: 0.1 * 3600 * 1000, 
             startOnTick: false, 
             endOnTick: false, 
             ordinal: false, 
             min:m, 
             max:n, 
             dateTimeLabelFormats: { 
              minute: '%H:%M' 
             } 
            }, 
            scrollbar: { 
             enabled: false 
            }, 
            rangeSelector: { 
             enabled: false 
            }, 
            navigator: { 
             enabled: false 
            }, 
            title: { 
             text: ' ' 
            }, 
            exporting: { 
             enabled: false 
            }, 
            credits: { 
             enabled: false 
            }, 
            series: [{ 
             name: '', 
             type: 'line', 
             data: data, 
             tooltip: { 
              valueDecimals: 2 
             }, 
             fillColor: { 
              linearGradient: { 
               x1: 0, 
               y1: 0, 
               x2: 0, 
               y2: 1 
              }, 
              stops: [ 
               [0, Highcharts.getOptions().colors[0]], 
               [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')] 
              ] 
             }, 

            }] 
           }); 
          }); 
         });