注释无法获取每小时数据
Annotations are unable to get hourly data
我检查了Anystock samples
中的所有示例代码
none 其中有每小时 xAnchor 值。我有以下示例：
// create annotation
var annotation = plot.annotations();
// create annotation vertical line
annotation
.verticalLine({
// X - part of the first anchor
xAnchor: '2009-07-02 15:15:00',
stroke: {
thickness: 2,
color: '#60727B',
dash: '10 15'
}
// disable interaction with Annotation
})
.allowEdit(false);
上面的代码在 2009-07-02 开始绘制的垂直线不是正确的 15:15 时间。
我上传到jsfiddle可以做什么？
此特定图表以 UTC 时间戳从 CSV 接收数据并分别显示。但是 xAnchor 适用于字符串。在这种情况下，它会考虑您当地的时区（由浏览器设置提供）。但它仍然显示为 UTC。要克服它，您应该从锚定日期中减去时区。下面是修改后的代码：
var offset = new Date().getTimezoneOffset() * 1000 * 60;
anychart.onDocumentReady(function () {
// set chart theme
anychart.theme('darkEarth');
// The data used in this sample can be obtained from the CDN
// https://cdn.anychart.com/csv-data/csco-daily.csv
anychart.data.loadCsvFile(
'https://cdn.anychart.com/csv-data/orcl-intraday.csv',
function (data) {
// create data table on loaded data
var dataTable = anychart.data.table();
dataTable.addData(data);
// map loaded data for the ohlc series
var mapping = dataTable.mapAs({
open: 1,
high: 2,
low: 3,
close: 4
});
// map loaded data for the scroller
var scrollerMapping = dataTable.mapAs();
scrollerMapping.addField('value', 4);
// create stock chart
var chart = anychart.stock();
// set chart title
chart.title('Annotated Candlestick Chart and EMA');
// set chart padding
chart.padding([15, 50, 57, 50]);
// create first plot on the chart
var plot = chart.plot(0);
// grid settings
plot.yGrid(true).xGrid(true).xMinorGrid(true).yMinorGrid(true);
/*
// create EMA indicators with period 50
var ema = plot.ema(
dataTable.mapAs({
value: 4
})
);
ema.series().stroke('1.5 #455a64');
*/
var series = plot.candlestick(mapping).name('CSCO');
series.legendItem().iconType('rising-falling');
// create annotation
var annotation = plot.annotations();
// create annotation vertical line
annotation
.verticalLine({
// X - part of the first anchor
xAnchor: new Date('2009-07-02 13:30:00').getTime() - offset,
stroke: {
thickness: 2,
color: '#60727B',
dash: '10 15'
}
// disable interaction with Annotation
})
.allowEdit(false);
// create annotation ellipse one
annotation.ellipse({
// X - part of the first anchor
xAnchor: '1991-03-10',
// Y - part of the first anchor
valueAnchor: 0.22,
// X - part of the second anchor
secondXAnchor: '1991-04-21',
// Y - part of the second anchor
secondValueAnchor: 0.1,
fill: 'none',
stroke: '3 #DD3F2A',
hovered: {
stroke: {
thickness: 3,
color: '#DD3F2A',
dash: '10 15'
}
}
});
// create annotation ellipse two
annotation.ellipse({
// X - part of the first anchor
xAnchor: '1991-09-15',
// Y - part of the first anchor
valueAnchor: 0.33,
// X - part of the second anchor
secondXAnchor: '1991-10-27',
// Y - part of the second anchor
secondValueAnchor: 0.21,
fill: 'none',
stroke: '3 #DD3F2A',
hovered: {
stroke: {
thickness: 3,
color: '#DD3F2A',
dash: '10 15'
}
}
});
// create annotation ellipse three
annotation.ellipse({
// X - part of the first anchor
xAnchor: '1992-03-29',
// Y - part of the first anchor
valueAnchor: 0.58,
// X - part of the second anchor
secondXAnchor: '1992-05-24',
// Y - part of the second anchor
secondValueAnchor: 0.425,
fill: 'none',
stroke: '3 #DD3F2A',
hovered: {
stroke: {
thickness: 3,
color: '#DD3F2A',
dash: '10 15'
}
}
});
// create annotation vertical line
annotation
.infiniteLine({
// X - part of the first anchor
xAnchor: '1991-03-31',
// Y - part of the first anchor
valueAnchor: 0.17,
// X - part of the second anchor
secondXAnchor: '1992-04-26',
// Y - part of the second anchor
secondValueAnchor: 0.25,
stroke: {
thickness: 2,
color: 'green',
dash: '10 15'
}
// disable interaction with Annotation
})
.allowEdit(false);
// create scroller series with mapped data
chart.scroller().candlestick(mapping);
// set container id for the chart
chart.container('container');
// initiate chart drawing
chart.draw();
// create range picker
var rangePicker = anychart.ui.rangePicker();
// init range picker
rangePicker.render(chart);
// create range selector
var rangeSelector = anychart.ui.rangeSelector();
// init range selector
rangeSelector.render(chart);
}
);
});
<html>
<head>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-base.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-ui.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-exports.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-stock.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-annotations.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-data-adapter.min.js"></script>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/themes/dark_earth.min.js"></script>
<link href="https://cdn.anychart.com/playground-css/annotated/annotated-title.css" type="text/css" rel="stylesheet">
<link href="https://cdn.anychart.com/releases/v8/css/anychart-ui.min.css" type="text/css" rel="stylesheet">
<link href="https://cdn.anychart.com/releases/v8/fonts/css/anychart-font.min.css" type="text/css" rel="stylesheet">
<style type="text/css">
html,
body,
#container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container">
<div class="container-title">
<p>
See also
<a href="https://www.anychart.com/products/anystock/drawing_tools/" target="_blank">Drawing Tools and
Annotations Demo</a>
</p>
</div>
</div>
我检查了Anystock samples
中的所有示例代码none 其中有每小时 xAnchor 值。我有以下示例：
// create annotation
var annotation = plot.annotations();
// create annotation vertical line
annotation
.verticalLine({
// X - part of the first anchor
xAnchor: '2009-07-02 15:15:00',
stroke: {
thickness: 2,
color: '#60727B',
dash: '10 15'
}
// disable interaction with Annotation
})
.allowEdit(false);
上面的代码在 2009-07-02 开始绘制的垂直线不是正确的 15:15 时间。 我上传到jsfiddle可以做什么？
此特定图表以 UTC 时间戳从 CSV 接收数据并分别显示。但是 xAnchor 适用于字符串。在这种情况下，它会考虑您当地的时区（由浏览器设置提供）。但它仍然显示为 UTC。要克服它，您应该从锚定日期中减去时区。下面是修改后的代码：
var offset = new Date().getTimezoneOffset() * 1000 * 60;
anychart.onDocumentReady(function () {
// set chart theme
anychart.theme('darkEarth');
// The data used in this sample can be obtained from the CDN
// https://cdn.anychart.com/csv-data/csco-daily.csv
anychart.data.loadCsvFile(
'https://cdn.anychart.com/csv-data/orcl-intraday.csv',
function (data) {
// create data table on loaded data
var dataTable = anychart.data.table();
dataTable.addData(data);
// map loaded data for the ohlc series
var mapping = dataTable.mapAs({
open: 1,
high: 2,
low: 3,
close: 4
});
// map loaded data for the scroller
var scrollerMapping = dataTable.mapAs();
scrollerMapping.addField('value', 4);
// create stock chart
var chart = anychart.stock();
// set chart title
chart.title('Annotated Candlestick Chart and EMA');
// set chart padding
chart.padding([15, 50, 57, 50]);
// create first plot on the chart
var plot = chart.plot(0);
// grid settings
plot.yGrid(true).xGrid(true).xMinorGrid(true).yMinorGrid(true);
/*
// create EMA indicators with period 50
var ema = plot.ema(
dataTable.mapAs({
value: 4
})
);
ema.series().stroke('1.5 #455a64');
*/
var series = plot.candlestick(mapping).name('CSCO');
series.legendItem().iconType('rising-falling');
// create annotation
var annotation = plot.annotations();
// create annotation vertical line
annotation
.verticalLine({
// X - part of the first anchor
xAnchor: new Date('2009-07-02 13:30:00').getTime() - offset,
stroke: {
thickness: 2,
color: '#60727B',
dash: '10 15'
}
// disable interaction with Annotation
})
.allowEdit(false);
// create annotation ellipse one
annotation.ellipse({
// X - part of the first anchor
xAnchor: '1991-03-10',
// Y - part of the first anchor
valueAnchor: 0.22,
// X - part of the second anchor
secondXAnchor: '1991-04-21',
// Y - part of the second anchor
secondValueAnchor: 0.1,
fill: 'none',
stroke: '3 #DD3F2A',
hovered: {
stroke: {
thickness: 3,
color: '#DD3F2A',
dash: '10 15'
}
}
});
// create annotation ellipse two
annotation.ellipse({
// X - part of the first anchor
xAnchor: '1991-09-15',
// Y - part of the first anchor
valueAnchor: 0.33,
// X - part of the second anchor
secondXAnchor: '1991-10-27',
// Y - part of the second anchor
secondValueAnchor: 0.21,
fill: 'none',
stroke: '3 #DD3F2A',
hovered: {
stroke: {
thickness: 3,
color: '#DD3F2A',
dash: '10 15'
}
}
});
// create annotation ellipse three
annotation.ellipse({
// X - part of the first anchor
xAnchor: '1992-03-29',
// Y - part of the first anchor
valueAnchor: 0.58,
// X - part of the second anchor
secondXAnchor: '1992-05-24',
// Y - part of the second anchor
secondValueAnchor: 0.425,
fill: 'none',
stroke: '3 #DD3F2A',
hovered: {
stroke: {
thickness: 3,
color: '#DD3F2A',
dash: '10 15'
}
}
});
// create annotation vertical line
annotation
.infiniteLine({
// X - part of the first anchor
xAnchor: '1991-03-31',
// Y - part of the first anchor
valueAnchor: 0.17,
// X - part of the second anchor
secondXAnchor: '1992-04-26',
// Y - part of the second anchor
secondValueAnchor: 0.25,
stroke: {
thickness: 2,
color: 'green',
dash: '10 15'
}
// disable interaction with Annotation
})
.allowEdit(false);
// create scroller series with mapped data
chart.scroller().candlestick(mapping);
// set container id for the chart
chart.container('container');
// initiate chart drawing
chart.draw();
// create range picker
var rangePicker = anychart.ui.rangePicker();
// init range picker
rangePicker.render(chart);
// create range selector
var rangeSelector = anychart.ui.rangeSelector();
// init range selector
rangeSelector.render(chart);
}
);
});
<html>
<head>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-base.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-ui.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-exports.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-stock.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-annotations.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-data-adapter.min.js"></script>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/themes/dark_earth.min.js"></script>
<link href="https://cdn.anychart.com/playground-css/annotated/annotated-title.css" type="text/css" rel="stylesheet">
<link href="https://cdn.anychart.com/releases/v8/css/anychart-ui.min.css" type="text/css" rel="stylesheet">
<link href="https://cdn.anychart.com/releases/v8/fonts/css/anychart-font.min.css" type="text/css" rel="stylesheet">
<style type="text/css">
html,
body,
#container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container">
<div class="container-title">
<p>
See also
<a href="https://www.anychart.com/products/anystock/drawing_tools/" target="_blank">Drawing Tools and
Annotations Demo</a>
</p>
</div>
</div>