Wijmo UI for the Web
注釈の追加 : CandleStickChart
| Wijmo ユーザーガイド > ウィジェット > Chart ウィジェット > CandlestickChart > 操作手順 > 注釈の追加 : CandleStickChart |
注釈は、グラフ上の特定のデータポイントに関連する重要な情報またはイベントを表示するために使用されます。ユーザーがデータポイントをホーバーして、注釈全文を表示できます。wijcandlestickchart の場合、ユーザーはテキスト、図形、画像などさまざまな種類の注釈をグラフに追加できます。画像とテキスト以外、Wijmoのグラフでは、円、楕円、線、多角形、四角形、正方形などさまざまな組み込み図形が対応されています。
グラフ上の注釈の位置は、Pointプロパティを使用して、そのxとy座標を設定することで指定できます。
注釈の添付を指定するには、AnnotationAttachmentプロパティを使用し、その値を次のように設定します。
BarChart、BubbleChart、CompositeChart、LineChartやScatterChart のグラフにも注釈を追加することができます。
| スクリプト |
コードのコピー |
|---|---|
<script id="scriptInit" type="text/javascript"> require(["wijmo.wijcandlestickchart"], function () { $(document).ready(function () { var data = [{ x: new Date("12/1/2011"), high: 10, low: 7.5, open: 8, close: 8.6 }, { x: new Date("12/2/2011"), high: 12, low: 8.6, open: 8.6, close: 11 }, { x: new Date("12/5/2011"), high: 11, low: 4.4, open: 11, close: 6.2 }, { x: new Date("12/6/2011"), high: 14, low: 4.2, open: 6.2, close: 13.8 }, { x: new Date("12/7/2011"), high: 16, low: 8, open: 13.8, close: 15 }, { x: new Date("12/8/2011"), high: 15, low: 6.2, open: 6.7, close: 12 }, { x: new Date("12/9/2011"), high: 13.5, low: 7, open: 7.4, close: 11 }, { x: new Date("12/10/2011"), high: 15.2, low: 7.2, open: 7.9, close: 15 }]; $("#wijcandlestickchartDefault").wijcandlestickchart({ type: "ohlc", textStyle: { "font-size": "13px", "font-family": '"Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif' }, header: { text: "Stock History" }, legend: { visible: true, orientation: "horizontal" }, hint: { content: function () { return this.label + ' - ' + Globalize.format(this.x, "d") + '\n High:' + this.high + '\n Low:' + this.low + '\n Open:' + this.open + '\n Close:' + this.close; }, contentStyle: { "font-size": "12px", "font-family": '"Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif' }, style: { fill: "#444444", stroke: "none" } }, axis: { x: { textStyle: { "font-weight": "normal" }, tickMajor: { position: "outside",//Position tick marks outside of the axis line style: { stroke: "#999999"//Make the tick marks match axis line color } } }, y: { text: "Stock Price", textStyle: { "font-weight": "normal" }, alignment: "far"//axis text aligned away from xy intersection }, }, dataSource: data, seriesList: [{ label: "MSFT", legendEntry: true, data: { x: { bind: "x" }, high: { bind: "high" }, low: { bind: "low" }, open: { bind: "open" }, close: { bind: "close" } } }], seriesStyles: [ { highLow: { fill: "#ff9900", width: 6 }, open: { fill: "#ff9900", height: 2 }, close: { fill: "#ff9900", height: 2 } } ], annotations: [ { type: "circle", content: "Relative [Center]", tooltip: "Relative [Center]", attachment: "relative", radius: 50, point: { x: 0.5, y: 0.5 }, style: { fill: '#01DFD7' } }, { type: "rect", content: "x:430,y:120+x:50,y:-10", tooltip: "x:430,y:120+x:50,y:-10", attachment: "absolute", width: 110, height: 25, point: { x: 430, y: 120 }, offset: { x: 50, y: -10 }, style: { fill: '#C0AFA7' } }, { type: "circle", content: "Absolute", tooltip: "Absolute", attachment: "absolute", radius: 45, point: { x: 120, y: 250 }, style: { fill: '#AA99D0' } }, { type: "image", attachment: "dataIndex", href: "http://wijmo.com/wp-content/themes/wijmo5/img/wijmo_flexible.png", tooltip: "wijmo_flexible.png", content: "Image", width: 60, height: 60, seriesIndex: 0, pointIndex: 3 }, { type: "circle", content: "DATA", tooltip: "DATA", attachment: "dataIndex", seriesIndex: 0, pointIndex: 4, radius: 20, style: { fill: '#FF1109', "fill-opacity": 0.25 } }, { type: "circle", content: "BOUND", tooltip: "BOUND", attachment: "dataIndex", seriesIndex: 0, pointIndex: 2, radius: 50, style: { fill: '#FFFF01', "fill-opacity": 0.2 } }, { type: "rect", content: "LastPoint", tooltip: "LastPoint", attachment: "dataIndex", seriesIndex: 0, pointIndex: 7, width: 50, height: 30, r: 3, style: { "fill": "#FE2E2E", "stroke": "#FFA9DB", "fill-opacity": 0.5, "stroke-width": 2, "stroke-opacity": 0.75 } }, { type: "ellipse", content: "SerieZeroPointSix", tooltip: "SerieZeroPointSix", attachment: "dataIndex", seriesIndex: 0, pointIndex: 6, width: 90, height: 30, r: 3, style: { "fill": "#FF7700", "stroke": "#FFA9DB", "fill-opacity": 0.3, "stroke-width": 2, "stroke-opacity": 0.75 } }, { type: "line", content: "LineText", tooltip: "LineText", start: { x: 10, y: 10 }, end: { x: 100, y: 100 }, style: { "fill": "#FE2E2E", "stroke": "#01A9DB", "fill-opacity": 2, "stroke-width": 5, "stroke-opacity": 1 } }, { type: "text", text: "CandleStick Chart Annotation", tooltip: "CandleStick Chart Annotation", point: { x: 400, y: 300 }, style: { "font-size": 25, "font-family": "Courier", "font-style": "italic" } }, { type: "polygon", content: "Polygon", tooltip: "Polygon", points: [ { "x": 200, "y": 0 }, { "x": 150, "y": 50 }, { "x": 175, "y": 100 }, { "x": 225, "y": 100 }, { "x": 250, "y": 50 } ], style: { "fill": "#FEAA2E", "stroke": "#01A9DB" } } ] }); }); }); </script> | |