Wijmo UI for the Web
注釈の追加 : CompositeChart
| Wijmo ユーザーガイド > ウィジェット > Chart ウィジェット > CompositeChart > 操作手順 > 注釈の追加 : CompositeChart |
注釈は、グラフ上の特定のデータポイントに関連する重要な情報またはイベントを表示するために使用されます。ユーザーがデータポイントをホーバーして、注釈全文を表示できます。wijcompositechart の場合、ユーザーはテキスト、図形、画像などさまざまな種類の注釈をグラフに追加できます。画像とテキスト以外、Wijmoのグラフでは、円、楕円、線、多角形、四角形、正方形などさまざまな組み込み図形が対応されています。
グラフ上の注釈の位置は、Pointプロパティを使用して、そのxとy座標を設定することで指定できます。
注釈の添付を指定するには、AnnotationAttachmentプロパティを使用し、その値を次のように設定します。
BarChart、BubbleChart、CandlestickChart、LineChartやScatterChart のグラフにも注釈を追加することができます。
| スクリプト |
コードのコピー |
|---|---|
<script id="scriptInit" type="text/javascript"> require(["wijmo.wijcompositechart"], function () { $(document).ready(function () { $("#wijcompositechart").wijcompositechart({ axis: { y: [{// main y axis text: "Temperature", compass: "east", autoMin: false, autoMax: false, min: 5, max: 35, textStyle: { fill: "#89A54E" }, labels: { style: { fill: "#89A54E" } } }, {// y1 axis text: "Rainfall", autoMax: false, autoMin: false, min: 0, max: 300 }, {// y2 axis text: "", compass: "east" }] }, stacked: false, hint: { content: function () { return this.label + '\n ' + this.y + ''; } }, seriesList: [{ type: "column", label: "West", legendEntry: true, data: { x: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], y: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] }, yAxis: 1 }, { type: "line", label: "East", legendEntry: true, data: { x: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], y: [1016, 1016, 1015.9, 1015.5, 1012.3, 1009.5, 1009.6, 1010.2, 1013.1, 1016.9, 1018.2, 1016.7] }, yAxis: 2 }, { type: "area", label: "South", legendEntry: true, data: { x: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], y: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6] }, markers: { visible: true, type: "circle" } }, { type: "column", label: "East", legendEntry: true, data: { x: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], y: [39.9, 51.5, 136.4, 79.2, 44.0, 76.0, 75.6, 88.5, 196.4, 150.1, 125.6, 94.4] }, yAxis: 1 }], annotations: [ { type: "circle", content: "Relative [LeftMiddle]", tooltip: "Relative [LeftMiddle]", attachment: "relative", radius: 50, point: { x: 0.1, y: 0.5 }, style: { fill: '#01DFD7', "fill-opacity": 0.75 } }, { type: "rect", content: "x:300,y:120+x:50,y:-10", tooltip: "x:300,y:120+x:50,y:-10", attachment: "absolute", width: 120, height: 50, point: { x: 300, y: 120 }, offset: { x: 50, y: -10 }, style: { fill: '#C0AFA7', "fill-opacity": 0.75 } }, { type: "image", attachment: "dataIndex", href: "http://wijmo.com/wp-content/themes/wijmo5/img/wijmo_flexible.png", tooltip: "wijmo_flexible.png", content: "Image", width: 30, height: 30, offset: { x: 1, y: -10 }, seriesIndex: 0, pointIndex: 1 }, { type: "circle", content: "Serie1Point0", tooltip: "Serie1Point0", attachment: "dataIndex", seriesIndex: 1, pointIndex: 0, radius: 35, style: { fill: '#FF1109', "fill-opacity": 0.75 } }, { type: "circle", content: "BOUND", tooltip: "BOUND", attachment: "dataIndex", seriesIndex: 0, pointIndex: 3, radius: 50, style: { fill: '#FFFF01', "fill-opacity": 0.75 } }, { type: "ellipse", content: "SerieOnePoint11", tooltip: "SerieOnePoint11", attachment: "dataIndex", seriesIndex: 1, pointIndex: 11, width: 90, height: 30, r: 3, style: { "fill": "#FF7700", "stroke": "#FFA9DB", "fill-opacity": 0.75, "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: "CompositeChart Annotation", tooltip: "CompositeChart Annotation", point: { x: 420, y: 30 }, style: { "font-size": 23, "font-family": "Trebuchet MS" } }, { 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> | |