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