目次
ヘッダーがありません
/*** USAGE: Chart(type, data, height, width, xaxis, yaxis, title, min, max, interval, id) PARAMETERS: type : str (one of 'circulargauge', 'column', 'multiseriescolumn', 'lineargauge', 'line', 'bar', 'multiseriesbar', 'pie', 'pyramid', or 'funnel') data : list (optional) height : num (default: 450) Height of chart in pixel or percent. If value is greater or equal to 1, then value represents pixel, otherwise the value is a relative perecentage. (optional) width : num (default: 450) Width of chart in pixel or percent. If value is greater or equal to 1, then value represents pixel, otherwise the value is a relative perecentage. (optional) xaxis : str (default: 'Y-Axis') Label for X-Axis. (optional) yaxis : str (default: 'X-Axis') Label for Y-Axis. (optional) title : str (default: 'Title') Label for chart. (optional) min : num (default: 0) Lower bound for Linear Gauge chart type. (optional) max : num (default: 100) Upper bound for Linear Gauge chart type. (optional) interval : num (default: 10) Major interval for axis markers. (optional) id : str (default: nil) ID for chart component. Used for listening for events and interacting with chart through JavaScript. VERSIONS: 1.0 2-Feb-10 robertm initial version 1.1 4-Mar-10 steveb code clean-up 1.2 29-Mar-10 steveb better handling of error conditions; new default look for progress gauge 1.3 16-Jul-10 steveb fixed inproper data handling for 'pie' type. support for min,max ***/ // GET VARIABLES FROM TEMPLATE CALL var type = string.tolower($type ?? $0 ?? 'circulargauge'); var data = $data ?? $1 ?? 67; var height = $height ?? $2 ?? 450; var width = $width ?? $3 ?? 450; var xaxis = $xaxis ?? $4; var yaxis = $yaxis ?? $5; var title = $title ?? $6; var min = $min ?? $7; var max = $max ?? $8; var interval = $interval ?? $9 ?? 10; var id = $id ?? $10; var error; // TODO (steveb): validate the 'data' field // TODO (steveb): enable/disable animation // format settings let settings_xml = <settings> <animation enabled="True"/> </settings>; // format axis var axes_xml = <axes> <x_axis> <title enabled=(xaxis is not nil)> <text> xaxis </text> </title> <labels> <format> "{%Value}{numDecimals:0}" </format> </labels> </x_axis> <y_axis position=((type == 'bar' || type == 'multiseriesbar') ? "opposite" : nil)> <title enabled=(yaxis is not nil)> <text> yaxis </text> </title> <labels> <format> "{%Value}{numDecimals:0}" </format> </labels> <scale major_interval=(interval) minor_interval=(interval / 4) minimum=(min) maximum=(max) /> </y_axis> </axes>; // set defaults for min-max let min = min ?? 0; let max = max ?? 100; // format data var data_xml; if((type != 'pie') && data is map) { let data_xml = <data> foreach (var series:points in data) { <series name=(series)> foreach (var p in points) { foreach(var label:value in p) { <point y=(value) name=(label)> <tooltip enabled="true"> <format> "{%SeriesName} ({%Name}) - {%Value}" </format> </tooltip> </point> } } </series> } </data>; } else if(data is list) { let data_xml = <data> <series name="Series 1"> foreach(var d in data) { foreach(var label:value in d) { <point y=(value) name=(label) /> } } </series> </data>; } // CHART BUILDS var chart; switch (type) { // SINGLE-SERIES COLUMN CHART, INCOMING DATA MUST BE FORMATTED AS [{label1:value1}, {label2:value2}, {label3:value3}] // MULTI-SERIES COLUMN CHART, INCOMING DATA MUST BE FORMATTED AS {series1:[{label1:value1}, {label2:value2}, {label3:value3}], series2:[{label1:value1}, {label2:value2}, {label3:value3}], series3:[{label1:value1}, {label2:value2}, {label3:value3}]} case 'column': case 'multiseriescolumn': case 'bar': case 'multiseriesbar': // determine layout value var layout; switch(type) { case 'column': case 'multiseriescolumn': let layout = "CategorizedVertical"; case 'bar': case 'multiseriesbar': let layout = "CategorizedHorizontal"; } // generate chart xml let chart = <anychart> settings_xml; <charts> <chart plot_type=(layout)> <data_plot_settings default_series_type="Bar" enable_3d_mode="true" z_aspect="0.25"> <bar_series group_padding="0.2" > <tooltip_settings enabled="true"/> </bar_series> </data_plot_settings> <chart_settings> <title enabled=(title is not nil)> <text> title </text> </title> // check if we plotting a series of data points if(data is map) { <legend enabled="true" position="Bottom" align="Spread" ignore_auto_item="true" padding="15"> <format> "{%Icon} {%Name}" </format> <title enabled="false"/> <columns_separator enabled="true"/> <background> <inside_margin left="10" right="10"/> </background> <items> <item source="Series"/> </items> </legend> } axes_xml; </chart_settings> data_xml; </chart> </charts> </anychart>; // MULTI-SERIES LINE CHART, INCOMING DATA MUST BE FORMATTED AS {series1:[{label1:value1}, {label2:value2}, {label3:value3}, {label4:value4}], series2:[{label1:value1}, {label2:value2}, {label3:value3}, {label4:value4}], series3:[{label1:value1}, {label2:value2}, {label3:value3}, {label4:value4}]} case "line": let chart = <anychart> settings_xml; <charts> <chart plot_type="CategorizedVertical"> <chart_settings> <title enabled=(title is not nil)> <text> title </text> </title> <legend enabled="true"> <title enabled="false"/> </legend> axes_xml; </chart_settings> <data_plot_settings default_series_type="Spline"> <line_series> <marker_settings> <marker size="8"/> <states> <hover> <marker size="12"/> </hover> </states> </marker_settings> <tooltip_settings enabled="True"/> </line_series> </data_plot_settings> data_xml; </chart> </charts> </anychart>; //3D PIE CHART, DATA VARIABLE MUST BE FORMATTED AS {name1:value1, name2:value2, name3:value3} case 'pie': let chart = '<anychart> settings_xml; <charts> <chart plot_type="Pie"> <data_plot_settings enable_3d_mode="true"> <pie_series> <tooltip_settings enabled="true"> <format> {%Name} : {%Value}{numDecimals:0} ({%YPercentOfSeries}{numDecimals: 0}%) </format> </tooltip_settings> <label_settings enabled="true"> <background enabled="false"/> <position anchor="Center" valign="Center" halign="Center" padding="20"/> <font color="White"> <effects> <drop_shadow enabled="true" distance="2" opacity="0.5" blur_x="2" blur_y="2"/> </effects> </font> <format>{%YPercentOfSeries}{numDecimals:0}%</format> </label_settings> </pie_series> </data_plot_settings> <data> <series name="Series 1" type="Pie">' .. ( foreach (var name:y in data) { '<point name="' .. name .. '" y="' .. y .. '"/>' } ) .. '</series> </data> <chart_settings> <title enabled="true" padding="15"> <text>' .. title .. '</text> </title> <legend enabled="true" position="Bottom" align="Spread" ignore_auto_item="true" padding="15"> <format>{%Icon} {%Name} - {%YValue}{numDecimals:0}</format> <title enabled="false"/> <columns_separator enabled="false"/> <background> <inside_margin left="10" right="10"/> </background> <items> <item source="Points"/> </items> </legend> </chart_settings> </chart> </charts> </anychart>'; // PYRAMID/FUNNEL CHART, DATA VARIABLE MUST BE FORMATTED AS {label1:value1, label2:value2, label3:value3} case 'pyramid': case 'funnel': var ispyramid = (type == 'pyramid'); let chart = <anychart> settings_xml; <charts> <chart plot_type="Funnel"> <chart_settings> <title enabled=(title is not nil)> <text> title </text> </title> <data_plot_background enabled="false" /> <legend enabled="false" /> </chart_settings> <data_plot_settings enable_3d_mode="true"> <funnel_series inverted=(ispyramid) neck_height=(ispyramid ? 0 : nil) fit_aspect="1" min_width=(ispyramid ? 0 : nil) padding=(ispyramid ? 0 : nil) mode="Square"> <animation enabled="true" type="Appear" show_mode="Smoothed" start_time="0.3" duration="1.3" interpolation_type="Cubic"/> <connector enabled="true" color="Black" opacity="0.4"/> <tooltip_settings enabled="true"> if(ispyramid) { <position anchor="CenterRight" padding="10" valign="Center" halign="right"/> } <format> "{%Name} - {%YValue}{numDecimals:0}" </format> </tooltip_settings> <label_settings enabled="true"> <animation enabled="true" type="Appear" show_mode="Smoothed" start_time="0.3" duration="1.3" interpolation_type="Cubic"/> if(ispyramid) { <position anchor="Center" valign="Center" halign="Center" padding="10"/> } else { <position anchor="center" padding="50"/> } <format> "{%Name} - {%YValue}{numDecimals:0}" </format> <background enabled="true"> <corners type="Rounded" all="3"/> </background> <states> <hover> <background> <border type="Solid" color="DarkColor(%Color)" thickness="2"/> </background> </hover> <pushed> <background> <border type="Solid" color="#494949" thickness="2" opacity="0.7"/> </background> </pushed> <selected_hover> <background> <border type="Solid" color="DarkColor(%Color)" thickness="2" opacity="0.7"/> </background> </selected_hover> <selected_normal> <background> <border type="Solid" color="DarkColor(%Color)" thickness="2"/> </background> </selected_normal> </states> </label_settings> <funnel_style> <border color="Black" opacity="0.05"/> <states> <hover> <fill color="%Color"/> <hatch_fill enabled="true" type="Percent50" color="White" opacity="0.3"/> </hover> <selected_hover> <fill color="%Color"/> <hatch_fill type="Checkerboard" color="#404040" opacity="0.1"/> </selected_hover> <selected_normal> <fill color="%Color"/> <hatch_fill type="Checkerboard" color="Black" opacity="0.1"/> </selected_normal> </states> </funnel_style> <marker_settings enabled="true"> <marker type="None" anchor="Center" v_align="Center" h_align="Center" size="12"/> <fill color="Yellow"/> <border color="DarkColor(Yellow)"/> <states> <hover> <marker type="Star5"/> </hover> <pushed> <marker type="Star5" size="8"/> </pushed> <selected_hover> <marker type="Star5" size="14"/> </selected_hover> <selected_normal> <marker type="Star5"/> </selected_normal> </states> </marker_settings> </funnel_series> </data_plot_settings> data_xml; </chart> </charts> </anychart>; // CIRCULAR GAUGE CHART, DATA VARIABLE MUST BE A NUMBER case 'circulargauge': let chart = <anychart> settings_xml; <margin all="0"/> <gauges> <gauge> <chart_settings> <title enabled=(title is not nil)> <text> title </text> </title> <chart_background> <border enabled="false"/> </chart_background> </chart_settings> <circular name="data"> <axis radius="37" start_angle="85" sweep_angle="190" size="3"> <labels align="Outside" padding="6"> <format> "{%Value}{numDecimals:0}" </format> </labels> <scale_bar> <fill color="#292929"/> </scale_bar> <major_tickmark align="Center" length="10" padding="0"/> <minor_tickmark enabled="false"/> <color_ranges> <color_range start=(min) end=(max) align="Inside" start_size="15" end_size="15" padding="6"> <fill type="Gradient"> <gradient> <key color="Red"/> <key color="Yellow"/> <key color="Green"/> </gradient> </fill> <border enabled="true" color="Black" opacity="0.4"/> </color_range> </color_ranges> </axis> <frame> <inner_stroke enabled="false"/> <outer_stroke enabled="false"/> <background> <fill type="Gradient"> <gradient angle="45"> <key color="#FDFDFD"/> <key color="#F7F3F4"/> </gradient> </fill> <border enabled="true" color="#A9A9A9"/> </background> <effects enabled="false"/> </frame> <pointers> <pointer value=(data) name="value"> <label enabled="true" under_pointers="true"> <position placement_mode="ByPoint" x="50" y="60"/> <format> "{%Value}{numDecimals:0}%" </format> <background enabled="false"/> </label> <needle_pointer_style thickness="7" point_thickness="5" point_radius="3"> <fill color="Rgb(230,230,230)"/> <border color="Black" opacity="0.7"/> <effects enabled="true"> <bevel enabled="true" distance="2" shadow_opacity="0.6" highlight_opacity="0.6"/> <drop_shadow enabled="true" distance="1" blur_x="1" blur_y="1" opacity="0.4"/> </effects> <cap> <background> <fill type="Gradient"> <gradient type="Linear" angle="45"> <key color="#D3D3D3"/> <key color="#6F6F6F"/> </gradient> </fill> <border color="Black" opacity="0.9"/> </background> <effects enabled="true"> <bevel enabled="true" distance="2" shadow_opacity="0.6" highlight_opacity="0.6"/> <drop_shadow enabled="true" distance="1.5" blur_x="2" blur_y="2" opacity="0.4"/> </effects> </cap> </needle_pointer_style> <animation enabled="true" start_time="0" duration="0.7" interpolation_type="Sine"/> </pointer> </pointers> </circular> </gauge> </gauges> </anychart>; // LINEAR GAUGE, DATA VARIABLE MUST BE A NUMBER case 'lineargauge': let chart = <anychart> settings_xml; <margin all="0"/> <gauges> <gauge> <chart_settings> <title> <text> title </text> </title> <chart_background> <border enabled="false"/> </chart_background> </chart_settings> <linear name="data"> <axis size="0" position="50"> <scale minimum=(min) maximum=(max) major_interval=(interval) minor_interval=(interval / 4) /> <scale_bar enabled="false"/> <labels padding="5"/> <color_ranges> <color_range start=(min) end=(max) align="Outside" padding="0" start_size="8" end_size="8"> <fill type="Gradient"> <gradient angle="90"> <key color="Red"/> <key color="Yellow"/> <key color="Green"/> </gradient> </fill> <border enabled="true" type="Solid" color="Black" opacity="0.4"/> </color_range> </color_ranges> </axis> <pointers> <pointer type="Marker" value=(data) name="value" color="#4662B0"> <tooltip enabled="true"/> <marker_pointer_style align="Outside" padding="5" width="10" height="10"/> <animation enabled="true" start_time="0" duration="1" interpolation_type="Elastic"/> <label enabled="true"> <position placement_mode="ByAnchor" valign="Center" halign="Right" padding="45"/> <format> "{%Value}{numDecimals:0}%" </format> <background enabled="false"/> </label> </pointer> </pointers> </linear> </gauge> </gauges> </anychart>; default: if(!error) { let error = "Invalid chart type selected (did not recognize '" .. type .. "')"; } } // check if there was an error if(error) { <p style="color: red"> error </p> } else { anychart(chart, width, height, id); }