2017-06-23 30 views
0

なぜ私のグラフに日付が表示されていないのか分かりません。私は何年も指定していない。私はこのコードを例題から取り出して修正しました。これはコードです:なぜチャートにデータが正しく表示されないのですか?

<!doctype html> 
<html> 
<head> 
    <script src="https://cdn.anychart.com/js/7.14.0/anychart-bundle.min.js"></script> 
    <link rel="stylesheet" href="https://cdn.anychart.com/css/7.14.0/anychart-ui.min.css" /> 
    <style> 
    html, body, #container { 
     width: 100%; 
     height: 100%; 
     margin: 0; 
     padding: 0; 
    } 
    </style> 
</head> 
<body> 
    <div id="container"></div> 
    <script type="text/javascript"> 
anychart.onDocumentReady(function() { 
    // create data set on our data 
    var dataSet = anychart.data.set(getData()); 

    // map data for the first series, take x from the zero column and value from the first column of data set 
    var seriesData_1 = dataSet.mapAs({ 
    x: [0], 
    value: [1] 
    }); 

    // map data for the second series, take x from the zero column and value from the second column of data set 
    var seriesData_2 = dataSet.mapAs({ 
    x: [0], 
    value: [2] 
    }); 

    // map data for the third series, take x from the zero column and value from the third column of data set 
    var seriesData_3 = dataSet.mapAs({ 
    x: [0], 
    value: [3] 
    }); 

    var seriesData_4 = dataSet.mapAs({ 
    x: [0], 
    value: [4] 
    }); 

    // create line chart 
    chart = anychart.line(); 

    // turn on chart animation 
    chart.animation(true); 

    // set chart padding 
    chart.padding([10, 20, 5, 20]); 

    // turn on the crosshair 
    chart.crosshair() 
    .enabled(true) 
    .yLabel(false) 
    .yStroke(null); 

    // set tooltip mode to point 
    chart.tooltip().positionMode('point'); 

    // set chart title text settings 
    chart.title('Security: MSFT'); 
    chart.title().padding([0, 0, 5, 0]); 

    // set yAxis title 
    chart.yAxis().title('Price'); 
    chart.xAxis().labels().padding([5]); 

    // create first series with mapped data 
    var series_1 = chart.line(seriesData_1); 
    series_1.name('Open'); 
    series_1.hoverMarkers() 
    .enabled(true) 
    .type('circle') 
    .size(4); 
    series_1.tooltip() 
    .position('right') 
    .anchor('left') 
    .offsetX(5) 
    .offsetY(5); 

    // create second series with mapped data 
    var series_2 = chart.line(seriesData_2); 
    series_2.name('Close'); 
    series_2.hoverMarkers() 
    .enabled(true) 
    .type('circle') 
    .size(4); 
    series_2.tooltip() 
    .position('right') 
    .anchor('left') 
    .offsetX(5) 
    .offsetY(5); 

    // create third series with mapped data 
    var series_3 = chart.line(seriesData_3); 
    series_3.name('Volume'); 
    series_3.hoverMarkers() 
    .enabled(true) 
    .type('circle') 
    .size(4); 
    series_3.tooltip() 
    .position('right') 
    .anchor('left') 
    .offsetX(5) 
    .offsetY(5); 

    var series_4 = chart.line(seriesData_4); 
    series_4.name('Price'); 
    series_4.hoverMarkers() 
    .enabled(true) 
    .type('circle') 
    .size(4); 
    series_4.tooltip() 
    .position('right') 
    .anchor('left') 
    .offsetX(5) 
    .offsetY(5);  

    // turn the legend on 
    chart.legend() 
    .enabled(true) 
    .fontSize(13) 
    .padding([0, 0, 10, 0]); 

    // set container id for the chart and set up paddings 
    chart.container('container'); 

    // initiate chart drawing 
    chart.draw(); 
}); 

function getData() { 
    return [ 
     [2016-12-01,757.44,759.85,737.02,747.92,3017947.0], 
     [2016-12-02,744.59,754.0,743.1,750.5,1452484.0], 
     [2016-12-05,757.71,763.9,752.9,762.52,1394223], 
     [2016-12-06,764.73,768.83,757.34,759.11,1690689.0], 
     [2016-12-07,761.0,771.36,755.8,771.19,1760966.0], 
     [2016-12-08,772.48,778.18,767.23,776.42,1488059.0], 
     [2016-12-09,780.0,789.43,779.02,789.29,1821914.0], 
     [2016-12-12,785.04,791.25,784.36,789.27,2104117.0], 
     [2016-12-13,793.9,804.38,793.34,796.1,2145209.0], 
     [2016-12-14,797.4,804.0,794.01,797.07,1704150.0], 
     [2016-12-15,797.34,803.0,792.92,797.85,1626499.0], 
     [2016-12-16,800.4,800.86,790.29,790.8,2443796.0], 
     [2016-12-19,790.22,797.66,786.27,794.2,1232087.0], 
     [2016-12-20,796.76,798.65,793.27,796.42,951014.0], 
     [2016-12-21,795.84,796.68,787.1,794.56,1211346.0], 
     [2016-12-22,792.36,793.32,788.58,791.26,972169.0], 
     [2016-12-23,790.9,792.74,787.28,789.91,623944.0], 
     [2016-12-27,790.68,797.86,787.66,791.55,789321.0], 
     [2016-12-28,793.7,794.23,783.2,785.05,1153824.0], 
     [2016-12-29,783.33,785.93,778.92,782.79,744272.0], 
     [2016-12-30,782.75,782.78,770.41,771.82,1769950.0] 
    ] 
} 
    </script> 
</body> 
</html> 

しかし、私の出力は次のようになります。

Output

なぜ、異なるx軸上の日付は私が指定されているでしょうか?

+0

あなたは日時軸が必要な場合は、軸方向に適切な日付を持っているミリ秒単位のタイムスタンプを必要としています。したがって、タイムスタンプに日付(2016-12-28)を解析し、軸タイプをdatetimeに設定する必要があります。 http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/xaxis/type-datetime-irregular/を参照してください。あなたが行ったような日付を指定すると、カテゴリ軸。日時ではありません。 – morganfree

答えて

2

あなたの日付が

["2016-12-01",757.44,759.85,737.02,747.92,3017947.0]

のようにあなたは文字通り2016-12-012003が得られた演算式として解釈されていない引用符付きとしてそれらを使用していた、文字列にする必要があります。 2016-12-271977などです。これは間違った日付の由来です。

<!doctype html> 
 
<html> 
 
<head> 
 
    <script src="https://cdn.anychart.com/js/7.14.0/anychart-bundle.min.js"></script> 
 
    <link rel="stylesheet" href="https://cdn.anychart.com/css/7.14.0/anychart-ui.min.css" /> 
 
    <style> 
 
    html, body, #container { 
 
     width: 100%; 
 
     height: 100%; 
 
     margin: 0; 
 
     padding: 0; 
 
    } 
 
    </style> 
 
</head> 
 
<body> 
 
    <div id="container"></div> 
 
    <script type="text/javascript"> 
 
anychart.onDocumentReady(function() { 
 
    // create data set on our data 
 
    var dataSet = anychart.data.set(getData()); 
 

 
    // map data for the first series, take x from the zero column and value from the first column of data set 
 
    var seriesData_1 = dataSet.mapAs({ 
 
    x: [0], 
 
    value: [1] 
 
    }); 
 

 
    // map data for the second series, take x from the zero column and value from the second column of data set 
 
    var seriesData_2 = dataSet.mapAs({ 
 
    x: [0], 
 
    value: [2] 
 
    }); 
 

 
    // map data for the third series, take x from the zero column and value from the third column of data set 
 
    var seriesData_3 = dataSet.mapAs({ 
 
    x: [0], 
 
    value: [3] 
 
    }); 
 

 
    var seriesData_4 = dataSet.mapAs({ 
 
    x: [0], 
 
    value: [4] 
 
    }); 
 

 
    // create line chart 
 
    chart = anychart.line(); 
 

 
    // turn on chart animation 
 
    chart.animation(true); 
 

 
    // set chart padding 
 
    chart.padding([10, 20, 5, 20]); 
 

 
    // turn on the crosshair 
 
    chart.crosshair() 
 
    .enabled(true) 
 
    .yLabel(false) 
 
    .yStroke(null); 
 

 
    // set tooltip mode to point 
 
    chart.tooltip().positionMode('point'); 
 

 
    // set chart title text settings 
 
    chart.title('Security: MSFT'); 
 
    chart.title().padding([0, 0, 5, 0]); 
 

 
    // set yAxis title 
 
    chart.yAxis().title('Price'); 
 
    chart.xAxis().labels().padding([5]); 
 

 
    // create first series with mapped data 
 
    var series_1 = chart.line(seriesData_1); 
 
    series_1.name('Open'); 
 
    series_1.hoverMarkers() 
 
    .enabled(true) 
 
    .type('circle') 
 
    .size(4); 
 
    series_1.tooltip() 
 
    .position('right') 
 
    .anchor('left') 
 
    .offsetX(5) 
 
    .offsetY(5); 
 

 
    // create second series with mapped data 
 
    var series_2 = chart.line(seriesData_2); 
 
    series_2.name('Close'); 
 
    series_2.hoverMarkers() 
 
    .enabled(true) 
 
    .type('circle') 
 
    .size(4); 
 
    series_2.tooltip() 
 
    .position('right') 
 
    .anchor('left') 
 
    .offsetX(5) 
 
    .offsetY(5); 
 

 
    // create third series with mapped data 
 
    var series_3 = chart.line(seriesData_3); 
 
    series_3.name('Volume'); 
 
    series_3.hoverMarkers() 
 
    .enabled(true) 
 
    .type('circle') 
 
    .size(4); 
 
    series_3.tooltip() 
 
    .position('right') 
 
    .anchor('left') 
 
    .offsetX(5) 
 
    .offsetY(5); 
 

 
    var series_4 = chart.line(seriesData_4); 
 
    series_4.name('Price'); 
 
    series_4.hoverMarkers() 
 
    .enabled(true) 
 
    .type('circle') 
 
    .size(4); 
 
    series_4.tooltip() 
 
    .position('right') 
 
    .anchor('left') 
 
    .offsetX(5) 
 
    .offsetY(5);  
 

 
    // turn the legend on 
 
    chart.legend() 
 
    .enabled(true) 
 
    .fontSize(13) 
 
    .padding([0, 0, 10, 0]); 
 

 
    // set container id for the chart and set up paddings 
 
    chart.container('container'); 
 

 
    // initiate chart drawing 
 
    chart.draw(); 
 
}); 
 

 
function getData() { 
 
    return [ 
 
     ["2016-12-01",757.44,759.85,737.02,747.92,3017947.0], 
 
     ["2016-12-02",744.59,754.0,743.1,750.5,1452484.0], 
 
     ["2016-12-06",764.73,768.83,757.34,759.11,1690689.0], 
 
     ["2016-12-07",761.0,771.36,755.8,771.19,1760966.0], 
 
     ["2016-12-08",772.48,778.18,767.23,776.42,1488059.0], 
 
     ["2016-12-09",780.0,789.43,779.02,789.29,1821914.0], 
 
     ["2016-12-12",785.04,791.25,784.36,789.27,2104117.0], 
 
     ["2016-12-13",793.9,804.38,793.34,796.1,2145209.0], 
 
     ["2016-12-14",797.4,804.0,794.01,797.07,1704150.0], 
 
     ["2016-12-15",797.34,803.0,792.92,797.85,1626499.0], 
 
     ["2016-12-16",800.4,800.86,790.29,790.8,2443796.0], 
 
     ["2016-12-19",790.22,797.66,786.27,794.2,1232087.0], 
 
     ["2016-12-20",796.76,798.65,793.27,796.42,951014.0], 
 
     ["2016-12-21",795.84,796.68,787.1,794.56,1211346.0], 
 
     ["2016-12-22",792.36,793.32,788.58,791.26,972169.0], 
 
     ["2016-12-23",790.9,792.74,787.28,789.91,623944.0], 
 
     ["2016-12-27",790.68,797.86,787.66,791.55,789321.0], 
 
     ["2016-12-28",793.7,794.23,783.2,785.05,1153824.0], 
 
     ["2016-12-29",783.33,785.93,778.92,782.79,744272.0], 
 
     ["2016-12-30",782.75,782.78,770.41,771.82,1769950.0] 
 
    ] 
 
} 
 
    </script> 
 
</body> 
 
</html>

関連する問題