注釈の追加 : BubbleChart

注釈は、グラフ上の特定のデータポイントに関連する重要な情報またはイベントを表示するために使用されます。ユーザーがデータポイントをホーバーして、注釈全文を表示できます。wijbubblechart の場合、ユーザーはテキスト、図形、画像などさまざまな種類の注釈をグラフに追加できます。画像とテキスト以外、Wijmoのグラフでは、円、楕円、線、多角形、四角形、正方形などさまざまな組み込み図形が対応されています。

グラフ上の注釈の位置は、Pointプロパティを使用して、そのxとy座標を設定することで指定できます。

注釈の添付を指定するには、AnnotationAttachmentプロパティを使用し、その値を次のように設定します。

absolute: 注釈ポイントは、コントロールのピクセル座標で指定されます。
dataCoordinate: 注釈ポイントは、データ座標で指定されます。
dataIndex: 注釈ポイントの座標は、データ系列インデックスとデータポイントインデックスで定義されます。
relative: 注釈ポイントは、コントロール内の相対位置で指定されます。(0,0)が左上隅、(1,1)が右下隅になります。

BarChart、CompositeChart、CandleStickChart、LineChartやScatterChart のグラフにも注釈を追加することができます。

ライブウィジェット
スクリプト

スクリプト	コードのコピー
<script id="scriptInit" type="text/javascript"> require(["wijmo.wijbubblechart"], function () { $(document).ready(function () { // defining multiple arrays as data sources. As in previous sample you can use any names for your properties // Note that this time we are going to use shared 'x' axis for all series. So it is defind below in 'data' property // and not presented in data source arrays var msft = [{ stock: 28.09, cap: 223.35 }, { stock: 30.39, cap: 225.88 }, { stock: 30.38, cap: 268.42 }], goog = [{ stock: 580.11, cap: 202.46 }, { stock: 618.25, cap: 197.00 }, { stock: 400.24, cap: 195.16 }], aapl = [{ stock: 400.95, cap: 394.55 }, { stock: 300.55, cap: 460.05 }, { stock: 583.09, cap: 508.30 }]; $("#wijbubblechart").wijbubblechart({ // defining shared 'x' axis values using 'data.x' proprty data: { x: [new Date(2015, 0, 1), new Date(2015, 0, 2), new Date(2015, 0, 3)] }, // defining series using unique array as data source for each one seriesList: [ { label: "GOOG", // setup series name dataSource: goog, // defining an arrays as data source for the current series data: { y: { bind: "stock" }, // binding the 'stock' property value of the each object in array for the 'y' axis y1: { bind: "cap" } // binding the 'cap' property value of the each object in array for the 'y1' axis }, legendEntry: true, }, { label: "AAPL", dataSource: aapl, data: { y: { bind: "stock" }, y1: { bind: "cap" } }, legendEntry: true, }, { label: "MSFT", dataSource: msft, data: { y: { bind: "stock" }, y1: { bind: "cap" } }, legendEntry: true, }], legend: { size: { width: 20, height: 14 } }, shadow: false, axis: { y: { text: "Stock price", labels: { textAlign: "far" } }, x: { text: "2015", tickMajor: { position: "inside" }, labels: { textAlign: "near" }, annoFormatString: "D" } }, hint: { content: function () { return "" + this.data.label + " \n" + "Stock price: " + Globalize.format(this.y, "c2") + "\n" + "Capitalization: " + this.data.y1 + "B"; }, style: { stroke: "#000", "stroke-width": 10 } }, 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.25 } }, { type: "circle", content: "Absolute", tooltip: "Absolute", attachment: "absolute", radius: 45, point: { x: 600, y: 260 }, style: { fill: '#9AE9D0', "fill-opacity": 0.5 } }, { 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, seriesIndex: 0, pointIndex: 1 }, { type: "circle", content: "DATA", tooltip: "DATA", attachment: "dataIndex", seriesIndex: 1, pointIndex: 1, radius: 20, style: { fill: '#FF1109', "fill-opacity":0.5} }, { type: "circle", content: "dataCoordinate", tooltip: "dataCoordinate", attachment: "dataCoordinate", point: { x: new Date(2015, 0, 2, 14, 0, 0), y: 150 }, radius: 40, style: { fill: '#FFFF01', "fill-opacity": 0.5 } }, { type: "ellipse", content: "SerieOnePointTwo", tooltip: "SerieOnePointTwo", attachment: "dataIndex", seriesIndex: 1, pointIndex: 2, width: 90, height: 30, r: 3, style: { "fill": "#FF7700", "stroke": "#FFA9DB", "fill-opacity": 0.7, "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: "BubbleChart\nAnnotation", tooltip: "BubbleChart Annotation", point: { x: 300, y: 280 }, style: { "font-size": 23, "font-family": "Trebuchet MS" } } ] }); }); }); </script>

スクリプト

コードのコピー

<script id="scriptInit" type="text/javascript">
    require(["wijmo.wijbubblechart"], function () {
        $(document).ready(function () {
            // defining multiple arrays as data sources. As in previous sample you can use any names for your properties
            // Note that this time we are going to use shared 'x' axis for all series. So it is defind below in 'data' property
            // and not presented in data source arrays
            var msft = [{
                stock: 28.09,
                cap: 223.35
            }, {
                stock: 30.39,
                cap: 225.88
            }, {
                stock: 30.38,
                cap: 268.42
            }],
            goog = [{
                stock: 580.11,
                cap: 202.46
            }, {
                stock: 618.25,
                cap: 197.00
            }, {
                stock: 400.24,
                cap: 195.16
            }],
            aapl = [{
                stock: 400.95,
                cap: 394.55
            }, {
                stock: 300.55,
                cap: 460.05
            }, {
                stock: 583.09,
                cap: 508.30
            }];


            $("#wijbubblechart").wijbubblechart({
                // defining shared 'x' axis values using 'data.x' proprty
                data: {
                    x: [new Date(2015, 0, 1), new Date(2015, 0, 2), new Date(2015, 0, 3)]
                },
                // defining series using unique array as data source for each one
                seriesList: [
                {
                    label: "GOOG", // setup series name
                    dataSource: goog, // defining an arrays as data source for the current series
                    data: {
                        y: { bind: "stock" }, // binding the 'stock' property value of the each object in array for the 'y' axis
                        y1: { bind: "cap" } // binding the 'cap' property value of the each object in array for the 'y1' axis
                    },
                    legendEntry: true,
                },
                {
                    label: "AAPL",
                    dataSource: aapl,
                    data: {
                        y: { bind: "stock" },
                        y1: { bind: "cap" }
                    },
                    legendEntry: true,
                }, {
                    label: "MSFT",
                    dataSource: msft,
                    data: {
                        y: { bind: "stock" },
                        y1: { bind: "cap" }
                    },
                    legendEntry: true,
                }],
                legend: {
                    size: {
                        width: 20,
                        height: 14
                    }
                },
                shadow: false,
                axis: {
                    y: {
                        text: "Stock price",
                        labels: {
                            textAlign: "far"
                        }
                    },
                    x: {
                        text: "2015",
                        tickMajor: {
                            position: "inside"
                        },
                        labels: {
                            textAlign: "near"
                        },
                        annoFormatString: "D"
                    }
                },
                hint: {
                    content: function () {
                        return "" + this.data.label + " \n"
                            + "Stock price: " + Globalize.format(this.y, "c2") + "\n"
                            + "Capitalization: " + this.data.y1 + "B";
                    },
                    style: {
                        stroke: "#000",
                        "stroke-width": 10
                    }
                },
                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.25 }
                    },                    
                    {
                        type: "circle",
                        content: "Absolute",
                        tooltip: "Absolute",
                        attachment: "absolute",
                        radius: 45,
                        point: { x: 600, y: 260 },
                        style: { fill: '#9AE9D0', "fill-opacity": 0.5 }
                    },
                    {
                        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,
                        seriesIndex: 0,
                        pointIndex: 1
                    },
                    {
                        type: "circle",
                        content: "DATA",
                        tooltip: "DATA",
                        attachment: "dataIndex",
                        seriesIndex: 1,
                        pointIndex: 1,
                        radius: 20,
                        style: { fill: '#FF1109', "fill-opacity":0.5}
                    },
                    {
                        type: "circle",
                        content: "dataCoordinate",
                        tooltip: "dataCoordinate",
                        attachment: "dataCoordinate",
                        point: { x: new Date(2015, 0, 2, 14, 0, 0), y: 150 },
                        radius: 40,
                        style: { fill: '#FFFF01', "fill-opacity": 0.5 }
                    },                        
                    {
                        type: "ellipse",
                        content: "SerieOnePointTwo",
                        tooltip: "SerieOnePointTwo",
                        attachment: "dataIndex",
                        seriesIndex: 1,
                        pointIndex: 2,
                        width: 90,
                        height: 30,
                        r: 3,
                        style: {
                            "fill": "#FF7700",
                            "stroke": "#FFA9DB",
                            "fill-opacity": 0.7,
                            "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: "BubbleChart\nAnnotation",
                        tooltip: "BubbleChart Annotation",
                        point: { x: 300, y: 280 },
                        style: {
                            "font-size": 23,
                            "font-family": "Trebuchet MS"
                        }
                    }                        
            ]
            });
        });
    });
</script>