0

私は非常にうまく機能しているHighchartsをうまく実装しました。私のハイチャートは 1 分ごとにライブ データを取得しており、期待どおりにポイントを追加しています。しかし、ハイチャートに 2 つのシリーズがあるような特定の問題があります。1 つ目はライン タイプ シリーズで、2 つ目はエリア タイプ シリーズです。最初のシリーズは常に 2 ポイントしか獲得できず、2 番目のシリーズは 200 ポイント以上を獲得します。データがライブであるとお伝えしたように、データはラインのみで午前 7 時に開始され、エリアの空白データは午前 9 時ちょうどに開始されます。新しいデータは午後 12 時 30 分まで 1 分ごとに開始されますが、私のチャートの午前 9 時に何が起こるか停止し、新しい次の日の午前 7 時でも私のチャートは停止します

しかし、ブラウザを更新すると、新しいデータが取得され、必要に応じて機能し始めます。

次のように私のコード

$(function () {
   $('#container').highcharts({
       credits: {
           enabled: 0
       },
       title: {
           text: null
       },    
       xAxis: {
           type: 'datetime',
           dateTimeLabelFormats: {
               minute: '%H:%M'
           },
           max: <%= MilliTimeStamp(_closingTime) %> ,
           min: <%= MilliTimeStamp(_openingTime) %> ,
           tickInterval: 0.5 * 3600 * 1000,
           minorTickInterval: 0.1 * 3600 * 1000,
           title: {
               text: null
           },
           lineWidth: 1,
           minorGridLineWidth: 1,
           endOnTick: true,
           showLastLabel: true,
           gridLineWidth: 1,
           labels: {
               style: {
                   font: '7.5pt Trebuchet MS'
               }
           },
           reversed: <%= isArabic %> // true for arabic layout and false for english layout
       },
       yAxis: {
           title: {
               text: null
           },
           max: <%= maxY %> ,
           min: <%= minY %> ,
           endOnTick: true,
           showLastLabel: true,
           labels: {
               style: {
                   font: '7.5pt Trebuchet MS'
               }
           },
           opposite: <%= isArabic %> // true for arabic layout and false for english layout
       },
       legend: {
           enabled: false
       },
       plotOptions: {
           area: {
               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')]
                   ]
               },
               lineWidth: 1,
               marker: {
                   enabled: false
               },
               shadow: false,
               states: {
                   hover: {
                       lineWidth: 1
                   }
               },
               threshold: null
           },
           line: {
               lineWidth: 1,
               marker: {
                   enabled: false
               },
               shadow: false,
               states: {
                   hover: {
                       lineWidth: 1
                   }
               },
               threshold: null
           }
       },
       tooltip: {
           formatter: function () {
               return '<span style="font-size:7.5pt;">' + Highcharts.dateFormat('%A, %e %B, %H:%M', this.points[0].x) + '</span><br><span style="color:' + this.points[0].series.color + ';">' + this.points[0].series.name + '</span>: <b>' + Highcharts.numberFormat(this.points[0].y, 0) + '</b>';
           },
           useHTML: true,
           shared: true
       },
       series: [{
           type: 'area',
           data: []
       }, {
           type: 'line',
           color: 'Red',
           data: []
       }]
   });

   <%
   if (isArabic == "true") { %> Highcharts.setOptions({
           lang: {
               months: <%= months %> ,
               weekdays: <%= days %>
           }
       }); <%
   } %>

   $.ajaxSetup({
       cache: false
   });
   recieveData();
});

function recieveData() {
   var pathArray = window.location.pathname.split('/');
   var chart = $('#container').highcharts();
   $.ajax({
       url: '/' + pathArray[1] + '/HomePageChartData.aspx',
       dataType: 'json',
       cache: false,
       data: {
           'time': new Date().getSeconds()
       },
       success: function (data) {
           chart.yAxis[0].setExtremes(data.minY, data.maxY, true, true);
           chart.series[1].setData([]);
           chart.series[1].name = data.lineSeriesName;

           chart.series[0].setData([]);
           chart.series[0].name = data.areaSeriesName;

           for (var x in data.lineSeriesData) {
               chart.series[1].addPoint([data.lineSeriesData[x][0], data.lineSeriesData[x][1]]);
           }

           for (var x in data.areaSeriesData) {
               chart.series[0].addPoint([data.areaSeriesData[x][0], data.areaSeriesData[x][1]]);
           }
           setTimeout(recieveData, 60000);
       }
   }
   });
}

午前 7 時の JSON データ

   {"maxX":"1367843400000","minX":"1367830800000","maxY":"7912","minY":"7511","tickIntervalY":"80","lineSeriesName":"Open","areaSeriesName":"Price Index","lineSeriesData":[[1367830800000,7715.35],[1367843400000,7715.35]],"areaSeriesData":[]}

午前 9 時以降の JSON データ

  {"maxX":"1367843400000","minX":"1367830800000","maxY":"7912","minY":"7511","tickIntervalY":"80","lineSeriesName":"Open","areaSeriesName":"Price Index","lineSeriesData":[[1367830800000,7715.35],[1367843400000,7715.35]],"areaSeriesData":[[1367830831000,7740.01],[1367830897000,7735.61]]}

そして、1分ごとにareaSeriesDataで新しいデータを取得し始めます

@@アップデート

午前 7 時と午前 9 時にデータが取得されないという問題が見つかりました。空の文字列が取得されたため、処理していないエラーが発生しました。以下のように変更して、シリーズの削除を開始しましたが、取得していません。データがある午前 7 時のラインのシリーズ。

    function recieveData() {
    var pathArray = window.location.pathname.split( '/' );
    var chart = $('#container').highcharts();
        $.ajax({
            url: '/' + pathArray[1] + '/_layouts/KSE.SharePoint/HomePageChartData.aspx',
            dataType: 'json',
            cache: false,
            data:{'time': new Date().getSeconds() },
            success: function (data) {
              chart.yAxis[0].setExtremes(data.minY, data.maxY, true, true);
              chart.series[1].setData([]);
              chart.series[1].name = data.lineSeriesName;

              chart.series[0].setData([]);
              chart.series[0].name = data.areaSeriesName;

              for (var x in data.lineSeriesData) {
                chart.series[1].addPoint([data.lineSeriesData[x][0], data.lineSeriesData[x][1]]);
              }

              for (var x in data.areaSeriesData) {
                chart.series[0].addPoint([data.areaSeriesData[x][0], data.areaSeriesData[x][1]]);
              }
              setTimeout(recieveData, 60000);
            },
            error: function() {
              setTimeout(recieveData, 60000);  
            }
          });
} 
4

1 に答える 1

0

シリーズ用に個別のデータを準備するには、json を解析する必要があります。さらに、「lineSeriesData」または「areaSeriesData」の代わりにデータを使用する必要があります。したがって、次のようになります。

[{ データ:[[1367830800000, 7715.35], [1367843400000, 7715.35]] },{ データ:[[1367830831000, 7740.01], [1367830897000, 7735.61]] }]

于 2013-05-07T13:57:44.690 に答える