注釈の追加 : BarChart

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

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

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

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

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

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

スクリプト	コードのコピー
<script id="scriptInit" type="text/javascript"> require(["wijmo.wijbarchart"], function () { $(document).ready(function () { var North = { label: "North", legendEntry: true, data: { x: [new Date(2015, 4, 17), new Date(2015, 4, 18), new Date(2015, 4, 19), new Date(2015, 4, 20), new Date(2015, 4, 21)], y: [20, 22, 19, 24, 25] } }, East = { label: "East", legendEntry: true, data: { x: [new Date(2015, 4, 17), new Date(2015, 4, 18), new Date(2015, 4, 19), new Date(2015, 4, 20), new Date(2015, 4, 21)], y: [8, 12, 10, 12, 15] } }, South = { label: "South", legendEntry: true, data: { x: [new Date(2015, 4, 17), new Date(2015, 4, 18), new Date(2015, 4, 19), new Date(2015, 4, 20)], y: [12, 8, 20, 10] } }, West = { label: "West", legendEntry: true, data: { x: [new Date(2015, 4, 17), new Date(2015, 4, 18), new Date(2015, 4, 19), new Date(2015, 4, 20), new Date(2015, 4, 21)], y: [8, 10, 15, 17, 21] } }; $("#wijbarchart").wijbarchart({ horizontal: false, seriesList: [North, East, South, West], showChartLabels: false, axis: { x: { text: "Date", annoFormatString: "D" }, y: { text: "Sales Amount" } }, legend: { compass: "east", orientation: "vertical", text: "Legend" }, header: { text: "Sales of 2014" }, annotations: [ { type: "circle", content: "Relative [Center]", tooltip: "Relative [Center]", attachment: "relative", radius: 50, point: { x: 0.5, y: 0.5 }, style: { fill: '#01DFD7' } }, { type: "circle", content: "Absolute", tooltip: "Absolute", attachment: "absolute", radius: 45, point: { x: 120, y: 230 }, 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, position:"top", seriesIndex: 1, pointIndex: 3 }, { type: "circle", content: "DATA", tooltip: "DATA", attachment: "dataIndex", seriesIndex: 0, pointIndex: 4, radius: 20, position:"left top", style: { fill: '#FF1109', "fill-opacity": 0.22 } }, { type: "rect", content: "SerieThree", tooltip: "SerieThree", attachment: "dataIndex", seriesIndex: 2, pointIndex: 0, 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: "SerieTwoPointFour", tooltip: "SerieTwoPointFour", attachment: "dataIndex", seriesIndex: 1, pointIndex: 4, width: 90, height: 30, r: 3, style: { "fill": "#FF7700", "stroke": "#FFA9DB", "fill-opacity": 0.5, "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: "TextOnlyAnnotation", tooltip: "TextOnlyAnnotation", point: { x: 350, y: 25 }, style: { "fill": "#FE2E2E", "stroke": "#01A9DB", "font-size": 18 } } ] }); }); }); </script>

スクリプト

コードのコピー

<script id="scriptInit" type="text/javascript">
    require(["wijmo.wijbarchart"], function () {
        $(document).ready(function () {
            var North = {
                label: "North",
                legendEntry: true,
                data: { x: [new Date(2015, 4, 17), new Date(2015, 4, 18), new Date(2015, 4, 19), new Date(2015, 4, 20), new Date(2015, 4, 21)], y: [20, 22, 19, 24, 25] }
            }, East = {
                label: "East",
                legendEntry: true,
                data: { x: [new Date(2015, 4, 17), new Date(2015, 4, 18), new Date(2015, 4, 19), new Date(2015, 4, 20), new Date(2015, 4, 21)], y: [8, 12, 10, 12, 15] }
            }, South = {
                label: "South",
                legendEntry: true,
                data: { x: [new Date(2015, 4, 17), new Date(2015, 4, 18), new Date(2015, 4, 19), new Date(2015, 4, 20)], y: [12, 8, 20, 10] }
            }, West = {
                label: "West",
                legendEntry: true,
                data: { x: [new Date(2015, 4, 17), new Date(2015, 4, 18), new Date(2015, 4, 19), new Date(2015, 4, 20), new Date(2015, 4, 21)], y: [8, 10, 15, 17, 21] }
            };


            $("#wijbarchart").wijbarchart({
                horizontal: false,
                seriesList: [North, East, South, West],
                showChartLabels: false,
                axis: {
                    x: {
                        text: "Date",
                        annoFormatString: "D"
                    },
                    y: {
                        text: "Sales Amount"
                    }
                },
                legend: {
                    compass: "east",
                    orientation: "vertical",
                    text: "Legend"
                },
                header: {
                    text: "Sales of 2014"
                },
                annotations: [
                    {
                        type: "circle",
                        content: "Relative [Center]",
                        tooltip: "Relative [Center]",
                        attachment: "relative",
                        radius: 50,
                        point: { x: 0.5, y: 0.5 },
                        style: { fill: '#01DFD7' }
                    },                
                    {
                        type: "circle",
                        content: "Absolute",
                        tooltip: "Absolute",
                        attachment: "absolute",
                        radius: 45,
                        point: { x: 120, y: 230 },
                        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,
                        position:"top",
                        seriesIndex: 1,
                        pointIndex: 3
                    },
                    {
                        type: "circle",
                        content: "DATA",
                        tooltip: "DATA",
                        attachment: "dataIndex",
                        seriesIndex: 0,
                        pointIndex: 4,
                        radius: 20,
                        position:"left top",
                        style: { fill: '#FF1109', "fill-opacity": 0.22 }
                    },                    
                    {
                        type: "rect",
                        content: "SerieThree",
                        tooltip: "SerieThree",
                        attachment: "dataIndex",
                        seriesIndex: 2,
                        pointIndex: 0,
                        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: "SerieTwoPointFour",
                        tooltip: "SerieTwoPointFour",
                        attachment: "dataIndex",
                        seriesIndex: 1,
                        pointIndex: 4,
                        width: 90,
                        height: 30,
                        r: 3,
                        style: {
                            "fill": "#FF7700",
                            "stroke": "#FFA9DB",
                            "fill-opacity": 0.5,
                            "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: "TextOnlyAnnotation",
                        tooltip: "TextOnlyAnnotation",
                        point: { x: 350, y: 25 },
                        style: {
                            "fill": "#FE2E2E",
                            "stroke": "#01A9DB",
                            "font-size": 18
                        }
                    }                        
                ]
            });
        });
    });
</script>