2016-04-27 29 views
0
$(function() { 
    $('#dc-item-demand-graph').highcharts({ 
     chart: { 
      type: 'spline', 
      padding : 0 
     }, 
     title: { 
      text: '' 
     }, 
     subtitle: { 
      text: '' 
     }, 
     xAxis: { 
      startOnTick: true, 
      type: 'datetime', 
      pointInterval: 5 * 24 * 3600000, 
      gridLineWidth: 1, 
      plotLines: [{ 
       color: '#f36c6c', 
       dashStyle: 'Solid', 
       value: 2, // Value of where the line will appear 
       width: 2 // Width of the line  
      }] 
     }, 
     yAxis: { 
      min: 0, 
      max: 700, 
      gridLineWidth: 0, 
      title: { 
       text: '' 
      }, 
      plotLines: [{ 
       value: 0, 
       width: 1, 
       color: '#808080' 
      }] 
     }, 
     legend: { 
      enabled: false, 
     }, 
     credits: { 
      enabled: false 
     }, 
     exporting: { 
      enabled: false 
     }, 
     //tooltip: { 
     // valueSuffix: '°C' 
     //}, 
     series: ItemDemandChartData() 
    }); 
}); 
function ItemDemandChartData() { 
    var data = [{ 

      name: 'At DC', 
      dashStyle: 'dot', 
      color: '#616fc6', 
      data: [400, 390, 300] 
     }, { 
      name: 'At stores', 
      dashStyle: 'ShortDash', 
      color: '#ffdb03', 
      data: [300, 320, 360, 320, 500] 
     }, { 
      name: 'ROP Generated', 
      dashStyle: 'ShortDash', 
      color: '#00c4db', 
      data: [200, 300, 500, 450, 400],    
      marker: { 
       enabled: true, 
       radius: 3, 
       symbol: 'triangle', 
       //symbol: 'url(/Content/Img/markdown.PNG)', 
       color: '#00c4db' 
      }, 
     }] 

    return data 
} 

上記のコードは、私が試したグラフのコードです。 には、添付の画像に示されているようなフォーマットのX軸値があります。X軸の日付がハイチャートで表示されない

x軸カテゴリまたはシリーズオプションのコードをどこで変更する必要があるのか​​よくわかりません。私を助けてください。

ありがとうございます! jsfiddle linkを更新

enter image description here

+1

datforamtを持つことができますxAxisではなく、 –

答えて

0

あなたのデータは唯一のy軸の値が、日付時刻のx軸の周りに言っているためです。

data: [300, 320, 360, 320, 500] 

したがって、1秒ごとに開始時刻とyポイントとして0を取っています。あなたが持っているしたい場合は、同様にあなたのタイムスタンプすることができUTC日付の

data: [ 
       [Date.UTC(2010, 0, 1), 300], 
       [Date.UTC(2010, 0, 2), 320], 
       [Date.UTC(2010, 0, 3), 360], 
       [Date.UTC(2010, 0, 6), 320], 
       [Date.UTC(2010, 0, 7), 500] 
      ] 

代わりに、ここに示すように、x軸上の日付が2次元としてデータを作ります。

ここにサンプルjsfiddleがあります。

あなたは

hereは(この例では、理由pointstartとpointIntervalの定期的な間隔で表示されます)日付フォーマットのための一例であるたいとあなたはpointIntervalパラメータは、一連のオブジェクトに定義されている必要があり

+0

@downvoter:downvoteの理由を教えてください – Strikers

+0

この回答は役に立ちました:) – Sarav

関連する問題