我有蜡烛绘图仪示例工作，但是当我尝试向数据系列添加注释时，注释只是浮动到图表的左上角。
显然，绘图员对绘图的花哨步法让注释设置者感到困惑。
我是Dygraphs的新手，我的JavaScript很生疏，所以我很欣赏任何关于让注释器与绘图仪一起工作的指示。
Location is turned off in the device settings. The result could be null even if the last location was previously retrieved because disabling location also clears the cache.
The device never recorded its location, which could be the case of a new device or a device that has been restored to factory settings.
Google Play services on the device has restarted, and there is no active Fused Location Provider client that has requested location after the services restarted. To avoid this situation you can create a new client and request location updates yourself. For more information, see Receiving Location Updates.
var BAR_WIDTH = 8;
function candlePlotter(e) {
// This is the officially endorsed way to plot all the series at once.
if (e.seriesIndex !== 0) return;
var setCount = e.seriesCount;
if (setCount != 4) {
throw "You must provide exactly 4 price series: open close high low";
}
var prices = [];
var price;
var sets = e.allSeriesPoints;
for (var p = 0; p < sets[0].length; p++) {
price = {
open: sets[0][p].yval,
close: sets[1][p].yval,
high: sets[2][p].yval,
low: sets[3][p].yval,
openY: sets[0][p].y,
closeY: sets[1][p].y,
highY: sets[2][p].y,
lowY: sets[3][p].y
};
prices.push(price);
}
var area = e.plotArea;
var ctx = e.drawingContext;
ctx.strokeStyle = '#202020';
ctx.lineWidth = 0.6;
for (p = 0; p < prices.length; p++) {
ctx.beginPath();
price = prices[p];
var topY = area.h * price.highY + area.y;
var bottomY = area.h * price.lowY + area.y;
var centerX = area.x + sets[0][p].x * area.w;
ctx.moveTo(centerX, topY);
ctx.lineTo(centerX, bottomY);
ctx.closePath();
ctx.stroke();
var bodyY;
if (price.open > price.close) {
ctx.fillStyle = 'rgba(244,44,44,1.0)';
bodyY = area.h * price.openY + area.y;
} else {
ctx.fillStyle = 'rgba(44,244,44,1.0)';
bodyY = area.h * price.closeY + area.y;
}
var bodyHeight = area.h * Math.abs(price.openY - price.closeY);
ctx.fillRect(centerX - BAR_WIDTH / 2, bodyY, BAR_WIDTH, bodyHeight);
}
}
var candleData = "Date,Open,Close,High,Low\n" +
"1,392.54,390.95,394.63,389.38\n" +
"2,389.93,389.09,390.94,386.76\n" +
"3,391.45,390.66,395.50,390.23\n" +
"4,392.85,393.62,394.04,391.03\n" +
"5,391.68,391.84,393.90,389.45\n" +
"6,393.00,388.81,395.40,387.10\n" +
"7,386.70,380.19,387.38,377.68\n" +
"8,383.33,378.94,383.74,378.31\n" +
"9,380.36,381.02,384.15,379.57\n" +
"10,382.47,382.21,384.85,380.48\n" +
"11,387.76,395.95,396.10,387.26\n" +
"12,396.69,396.45,397.30,392.01\n" +
"13,397.00,398.55,399.13,396.10\n" +
"14,399.69,403.33,403.59,399.49\n" +
"15,403.10,406.53,409.09,403.02\n" +
"16,406.89,402.64,408.25,401.34\n" +
"17,403.40,405.12,405.65,400.51\n" +
"18,403.51,405.00,406.28,403.49\n" +
"19,409.50,411.23,412.50,409.00\n" +
"20,410.21,413.44,414.68,409.28\n";
g = new Dygraph(
document.getElementById("candlechart"),
candleData, {
plotter: candlePlotter,
});
g.ready(function() {
g.setAnnotations([{
series: "High",
x: "6",
shortText: "Hello",
text: "Hello world"
}]);
});
答案 0 :(得分：1)
问题在于如何获取dygraphs样式表。它应该是<link href>，而不是<link src>。这是一个更正的代码段。
var BAR_WIDTH = 8;
function candlePlotter(e) {
// This is the officially endorsed way to plot all the series at once.
if (e.seriesIndex !== 0) return;
var setCount = e.seriesCount;
if (setCount != 4) {
throw "You must provide exactly 4 price series: open close high low";
}
var prices = [];
var price;
var sets = e.allSeriesPoints;
for (var p = 0; p < sets[0].length; p++) {
price = {
open: sets[0][p].yval,
close: sets[1][p].yval,
high: sets[2][p].yval,
low: sets[3][p].yval,
openY: sets[0][p].y,
closeY: sets[1][p].y,
highY: sets[2][p].y,
lowY: sets[3][p].y
};
prices.push(price);
}
var area = e.plotArea;
var ctx = e.drawingContext;
ctx.strokeStyle = '#202020';
ctx.lineWidth = 0.6;
for (p = 0; p < prices.length; p++) {
ctx.beginPath();
price = prices[p];
var topY = area.h * price.highY + area.y;
var bottomY = area.h * price.lowY + area.y;
var centerX = area.x + sets[0][p].x * area.w;
ctx.moveTo(centerX, topY);
ctx.lineTo(centerX, bottomY);
ctx.closePath();
ctx.stroke();
var bodyY;
if (price.open > price.close) {
ctx.fillStyle = 'rgba(244,44,44,1.0)';
bodyY = area.h * price.openY + area.y;
} else {
ctx.fillStyle = 'rgba(44,244,44,1.0)';
bodyY = area.h * price.closeY + area.y;
}
var bodyHeight = area.h * Math.abs(price.openY - price.closeY);
ctx.fillRect(centerX - BAR_WIDTH / 2, bodyY, BAR_WIDTH, bodyHeight);
}
}
var candleData = "Date,Open,Close,High,Low\n" +
"1,392.54,390.95,394.63,389.38\n" +
"2,389.93,389.09,390.94,386.76\n" +
"3,391.45,390.66,395.50,390.23\n" +
"4,392.85,393.62,394.04,391.03\n" +
"5,391.68,391.84,393.90,389.45\n" +
"6,393.00,388.81,395.40,387.10\n" +
"7,386.70,380.19,387.38,377.68\n" +
"8,383.33,378.94,383.74,378.31\n" +
"9,380.36,381.02,384.15,379.57\n" +
"10,382.47,382.21,384.85,380.48\n" +
"11,387.76,395.95,396.10,387.26\n" +
"12,396.69,396.45,397.30,392.01\n" +
"13,397.00,398.55,399.13,396.10\n" +
"14,399.69,403.33,403.59,399.49\n" +
"15,403.10,406.53,409.09,403.02\n" +
"16,406.89,402.64,408.25,401.34\n" +
"17,403.40,405.12,405.65,400.51\n" +
"18,403.51,405.00,406.28,403.49\n" +
"19,409.50,411.23,412.50,409.00\n" +
"20,410.21,413.44,414.68,409.28\n";
g = new Dygraph(
document.getElementById("candlechart"),
candleData, {
plotter: candlePlotter,
});
g.ready(function() {
g.setAnnotations([{
series: "High",
x: '6',
shortText: "Hello",
text: "Hello world"
}]);
});<script src="//cdnjs.cloudflare.com/ajax/libs/dygraph/2.1.0/dygraph.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/dygraph/2.1.0/dygraph.css" />
<div id="candlechart"></div>