打开 flash 图表:如何显示投影数据
我正在使用打开的 Flash 图表在我的页面中显示图表。 我使用下面的代码将折线图数据显示到我的页面。
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF("open-flash-chart.swf", "my_chart", "530", "250","9.0.0", "expressInstall.swf",
{"data-file":"data.json"}
);
</script>
我的 json 文件如下
{
"y_legend":{
"text": "Price US$",
"style": "{color: #53B9AA;font-size:20; }"
},
"elements":[
{
"type": "line",
"colour": "#53B9AA",
"bg_colour": "#E58A25",
"background-color":"#53B9AA",
"inner_background": "#E58A25",
"text": "Price History",
"font-size": 19,
"width": 1,
"dot-style": {
"type":"solid-dot", "colour":"#F57F22", "dot-size": 3,
"tip":"Average price: #val#<br>#x_label#" },
"on-show": {"type": "shrink-in", "cascade":1, "delay":0.7},
"values" : [
5,7,10,12,13,{"value":11,"colour":"#53B9AA","tip":"Average price : #val#<br>#x_label#"},
10,9,8,7,6]
}
],
"x_axis":{
"colour": "#7CC8B5",
"text": "Price US$",
"labels": {
"rotate": "vertical",
"labels":["Jan-09","Feb-09","Mar-09",
"Apr-09","May-09","Jun-09",
"Jul-09","Aug-09","Sep-09",
"Oct-09","Nov-09","Dec-09",
"Jan-10","Feb-10","Mar-10"]
}
},
"y_axis":{
"stroke": 4,
"tick-length": 10,
"colour": "#7CC8B5",
"grid-colour": "#ADB5C7",
"grid-visible": true,
"offset": false,
"min": 5,
"max": 20,
"visible": true,
"steps": 5
}
}
图表在我的浏览器中渲染得很好。 现在我想向图表添加更多数据。 基本上我的图表显示了过去几个月的平均销售额。 我还想显示预计/预测/未来的数据。我可以将该数据传递到 jSON 文件。 我希望未来的数据在图表中以不同的颜色显示。 我也想在图表顶部显示图例,以指示哪一个是当前数据,哪一个是未来数据。
I am using open flash chart to display a chart in my page. I am using the below code to display the line chart data to my page.
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF("open-flash-chart.swf", "my_chart", "530", "250","9.0.0", "expressInstall.swf",
{"data-file":"data.json"}
);
</script>
and my json file is as follows
{
"y_legend":{
"text": "Price USquot;,
"style": "{color: #53B9AA;font-size:20; }"
},
"elements":[
{
"type": "line",
"colour": "#53B9AA",
"bg_colour": "#E58A25",
"background-color":"#53B9AA",
"inner_background": "#E58A25",
"text": "Price History",
"font-size": 19,
"width": 1,
"dot-style": {
"type":"solid-dot", "colour":"#F57F22", "dot-size": 3,
"tip":"Average price: #val#<br>#x_label#" },
"on-show": {"type": "shrink-in", "cascade":1, "delay":0.7},
"values" : [
5,7,10,12,13,{"value":11,"colour":"#53B9AA","tip":"Average price : #val#<br>#x_label#"},
10,9,8,7,6]
}
],
"x_axis":{
"colour": "#7CC8B5",
"text": "Price USquot;,
"labels": {
"rotate": "vertical",
"labels":["Jan-09","Feb-09","Mar-09",
"Apr-09","May-09","Jun-09",
"Jul-09","Aug-09","Sep-09",
"Oct-09","Nov-09","Dec-09",
"Jan-10","Feb-10","Mar-10"]
}
},
"y_axis":{
"stroke": 4,
"tick-length": 10,
"colour": "#7CC8B5",
"grid-colour": "#ADB5C7",
"grid-visible": true,
"offset": false,
"min": 5,
"max": 20,
"visible": true,
"steps": 5
}
}
The chart is rendering in my browser pretty well. Now I want to add some more data to chart. Basically my chart is displaying the average sales for past few months. I want to show the projected/forecasted/future data also.I can pass that data to the jSON file. I want the future data to be in a different color in the chart. And I want to display the legends too in the top of the chart to indicate which one is current data and which one is future data.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
解决方案是对当前数据和投影数据使用不同的线。
您可以将多条线添加到单个图表中,但这可能不适合您的目的,因为(至少目前)折线图需要具有整个 x 轴范围的数据,并且任何空值都会被插值。
一种选择是使用此站点中的修补版本,设置null-gap:true 并使用空数据值来填充行位置。
该选项是使用 Flash 对象的普通版本并使用散点图,如下例所示: http:// /teethgrinder.co.uk/open-flash-chart-2/scatter-mixed.php
The solution is to use different lines for the current and projected data.
You can add multiple lines to a single chart, but this might not suit your purposes, since (currently at least), line charts need to have data for the whole x-axis range, and any null values are interpolated.
One option is to use the patched version from this site, set null-gap:true and use null data values to pad the line positions.
The option is to use the normal version of the flash object and use scatter charts as in this example: http://teethgrinder.co.uk/open-flash-chart-2/scatter-mixed.php