fusioncharts折线图

最新推荐文章于 2021-03-07 03:48:26 发布

原创最新推荐文章于 2021-03-07 03:48:26 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

13 篇文章

订阅专栏

本文介绍如何使用FusionCharts JS库创建一个显示三个月趋势的交互式线图。该图表展示了特定日期范围内的数据，包括如何设置图表尺寸、数据格式及自定义样式等详细配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<script type="text/javascript" src="{{$smarty.const.APP_URL}}templates/default/js/fusioncharts/js/fusioncharts.js"></script>
                    <script type="text/javascript" src="{{$smarty.const.APP_URL}}templates/default/js/fusioncharts/js/themes/fusioncharts.theme.fint.js"></script>
                    <script type="text/javascript">
                        FusionCharts.ready(function(){
                            var revenueChart = new FusionCharts({
                                "type": "line",
                                "renderAt": "chartContainer",
                                "width": "231",
                                "height": "135",
                                "dataFormat": "json",
                                "dataSource":  {
                                    "chart": {
                                        "caption": "3个月走势",               //主标题
                                        "subCaption": "{{$order_total_info.three_month}}至{{$order_total_info.today}}",  //副标题
                                        "defaultNumberScale":'',
                                        "numberScaleValue":"1",      //进制 加1000不显示K
                                        "numberScaleUnit":"",
                                        "xAxisName": "",
                                        "yAxisName": "CNY-KG",    //Y轴说明
                                        "yAxisMinValue":{{$order_total_info.min}},    //此处赋值
                                        "yAxisMaxValue":{{$order_total_info.max}},    //此处赋值
                                        "showValues":0,          //不显示数值
                                        "drawAnchors":0,         //不显示锚点
                                        "captionFontSize":12,    //主标题字体大小
                                        "subCaptionFontSize":10,  //副标题字体大小
                                        "chartTopMargin":0,      //顶部内边距
                                        "chartBottomMargin":0,   //底部内边距
                                        "formatNumber":0,         //此两个属性显示原有数值
                                        "formatNumberScale":0,   //此两个属性显示原有数值
                                        "theme": "fint"
                                    },
                                    "data": {{$order_total}}
                        }
                        });
                        revenueChart.render();
                        });
                    </script>
                    <div id="chartContainer" style = "margin:0 auto; width:231px; height:135px;"></div>

data数据格式

$data[$j]['label']=date('n-j', strtotime('-'.$i.' days'));

$data[$j]['value']=$Model->where("time>=".$start_time." and time<".$end_time)->getField('average_price');

用法参考：

http://www.cnblogs.com/jifeng/archive/2012/05/28/2521306.html

https://www.evget.com/article/2015/12/2/23115.html