zoukankan      html  css  js  c++  java
  • 图表控件的学习===》hightChart 和 Chartjs的使用

    hightChart : 比较旧的图表控件   商业需要授权

    Chartjs 免费开源

    刚开始使用了下 hightchart 然后参考示例 建了对应的参数配置的类, 也顺利的集合到后台动态传输。  后面感觉要商业授权,还是算了。 

    半夜4点多起来 看了下chartjs的示例,感觉比hightchart会更简单点,比较好管理,所以就全部看完之后,自己早上又开始重新建了对应的配置类进行测试。

    https://code.google.com/archive/p/ichartjs/downloads  下载地址  要下载最新的2.0版本

       /// <summary>
        /// chartjs的类==》 一定要下载对应的文档
        /// </summary>
        public class ChartsjsBase:IChartsBase
        {
            public ChartsjsBase()
            {
                
            }  
            /// <summary>
            /// 数据
            /// </summary>
            public Data data { get; set; }
            public Options options { get; set; }
            public string ToJson()
            {
                
               
                return JsonHelper.Serialize(this);
            }
            /// <summary>
            /// 可以返回之后 用mvc 的json再转
            /// </summary>
            /// <returns></returns>
            public string ToJsonType()
            {
                JObject json = new JObject();
                json.Add(data);
                json.Add(options);
                return json.ToString();
            }
        }
        /// <summary>
        /// 数据
        /// </summary>
        public class Data
        {
            /// <summary>
            /// x轴的表示
            /// </summary>
            public string labels { get; set; }
            /// <summary>
            /// 数据,数组中的每一个object代表一条线
            /// </summary>
            public DataSets[] datasets { get; set; }  
        }
    
        /// <summary>
        /// 报表数据
        /// // 颜色的使用类似于CSS,你也可以使用RGB、HEX或者HSL
                // rgba颜色中最后一个值代表透明度
                // 填充颜色
        /// </summary>
        public class DataSets
        {
            /// <summary>
            /// // 填充颜色
            /// </summary>
            public string fillColor { get; set; }
            /// <summary>
            /// 线的颜色
            /// </summary>
            public string strokeColor { get; set; }
            /// <summary>
            /// 点的填充颜色
            /// </summary>
    	    public string pointColor { get;set; }
            /// <summary>
            /// 点的边线颜色
            /// </summary>
            public string pointStrokeColor { get; set; }
            /// <summary>
            /// 与x轴标示对应的数据
            /// </summary>
            public double[] data { get; set; }
            
    			
        }
    
        #region 配置 图标
        /// <summary>
        /// 配置 
        /// </summary>
        public class Options
        {
            /// <summary>
            /// 配置
            /// </summary>
            public Options()
            {
                this.animationEasing="easeOutQuart";
                this.animation=true;
                this.animationSteps=60;
                //1
                this.bezierCurve=true;
                //3
                this.datasetFill=true;
                this.datasetStroke=true;
                this.datasetStrokeWidth=1;
                this.onAnimationComplete=null;
                //16
                this.scaleFontColor=Color.Blue.ToString();
                this.scaleFontFamily="Arial";
                this.scaleFontStyle="normal";
                this.scaleGridLineColor=Color.AliceBlue.ToString();
                this.scaleLabel="Unions";
                this.scaleLineColor=Color.Black.ToString();
                this.scaleFontSize=12;
                this.scaleGridLineWidth=1;
                this.scaleLineWidth=2;
                this.scaleSteps=5;
                this.scaleStepWidth=2;
                this.scaleOverlay=true;
                this.scaleOverride=true;
                this.scaleStartValue=0;
                this.scaleShowLabels=true;
                this.scaleShowGridLines=true;
                //3
                this.pointDot=true;
                this.pointDotRadius=0.5;
                this.pointDotStrokeWidth=1;
            }
            /// <summary>
            /// 网格线是否在数据线的上面
            /// </summary>
            public bool scaleOverlay { get; set; }
            /// <summary>
            /// 是否用硬编码重写y轴网格线
            /// </summary>
            public bool scaleOverride { get; set; }
            /// <summary>
            /// y轴刻度的个数
            /// </summary>
            public int? scaleSteps { get; set; }
            /// <summary>
            /// y轴每个刻度的宽度
            /// </summary>
            public int? scaleStepWidth { get; set; }
            /// <summary>
            /// 起始值
            /// </summary>
            public int? scaleStartValue { get; set; }
            /// <summary>
            ///  x y的颜色
            /// </summary>
            public string scaleLineColor { get; set; } 
            /// <summary>
            /// xy轴的线宽 
            /// </summary>
            public int scaleLineWidth { get; set; }
    
            //Boolean - Whether to show labels on the scale    
            /// <summary>
            ///  是否显示y轴的标签
            /// </summary>
            public bool scaleShowLabels { get; set; }
            
            //Interpolated JS string - can access value
            /// <summary>
            /// .标签显示值
            /// </summary>
             public string scaleLabel { get;set; }
            
            //String - Scale label font declaration for the scale label
            /// <summary>
            ///  标签的字体 Arial
            /// </summary>
    
            public string scaleFontFamily { get; set; }
            
            //Number - Scale label font size in pixels    
            /// <summary>
            /// 标签字体的大小
            /// </summary>
     
            public  int scaleFontSize { get; set; }
            
            //String - Scale label font weight style
            /// <summary>
            /// 标签字体的样式 normal
            /// </summary>
    
            public string scaleFontStyle { get;set; }
            
            //String - Scale label font colour    
            /// <summary>
            ///  #666  标签字体的颜色
            /// </summary>
            public string scaleFontColor { get; set; }
            
            ///Boolean - Whether grid lines are shown across the chart
            /// <summary>是否显示网格线
            /// </summary>
            public bool scaleShowGridLines { get; set; }
            
            //String - Colour of the grid lines
            /// <summary>
            ///  网格线的颜色 : "rgba(0,0,0,.1)",
            /// </summary>
    
            public string  scaleGridLineColor { get; set; }
            
            //Number - Width of the grid lines
            /// <summary>
            ///  网格线的线宽
            /// </summary>
    
            public int scaleGridLineWidth {get; set; }
            
            //Boolean - Whether the line is curved between points
            /// <summary>
            ///  是否是曲线
            /// </summary>
    
            public bool bezierCurve { get; set; }
            
            //Boolean - Whether to show a dot for each point
            /// <summary>
            ///  是否显示点
            /// </summary>
    
            public bool pointDot { get; set; }
            
            //Number - Radius of each point dot in pixels
            /// <summary>
            ///  点的半径
            /// </summary>
    
            public double pointDotRadius { get; set; }
            
            //Number - Pixel width of point dot stroke
            /// <summary>
            /// 点的线宽
            /// </summary>
    
            public int pointDotStrokeWidth { get;set; }
            
            /// <summary>
            /// Boolean - Whether to show a stroke for datasets
            /// </summary>
    
           public bool   datasetStroke { get;set; }
            
            //Number - Pixel width of dataset stroke
            /// <summary>
            ///  数据线的线宽
            /// </summary>
    
           public int  datasetStrokeWidth { get; set; }
            
            //Boolean - Whether to fill the dataset with a colour
            /// <summary>
            ///  数据线是否填充颜色
            /// </summary>
    
            public bool datasetFill { get; set; }
            
            //Boolean - Whether to animate the chart
            /// <summary>
            /// 是否有动画效果
            /// </summary>
     
            public bool animation { get; set; }
    
            //Number - Number of animation steps
            /// <summary>
            ///  动画的步数 60
            /// </summary>
    
            public int animationSteps { get; set; }
    
            //String - Animation easing effect
            /// <summary>
            ///  动画的效果 easeOutQuart
            /// </summary>
    
           public string  animationEasing { get; set; }
    
            //Function - Fires when the animation is complete
            /// <summary>
            ///  动画完成后调用 Function 可以写功能  null
            /// </summary>
           public string onAnimationComplete { get; set; }
            /// <summary>
            /// 写到xml文档  26个字段
            /// </summary>
            /// <param name="doc"></param>
            public void WriteToXml(XmlDocument doc)
            {
                XmlNode root = doc.SelectSingleNode("Settings");
                //3
                Options.SetNodeValue(doc, root, "animationEasing", this.animationEasing);
                Options.SetNodeValue(doc, root, "animation", this.animation.ToString());
                Options.SetNodeValue(doc, root, "animationSteps", this.animationSteps.ToString());
                //1
                Options.SetNodeValue(doc, root, "bezierCurve", this.bezierCurve.ToString());
                //3
                Options.SetNodeValue(doc, root, "datasetFill", this.datasetFill.ToString());
                Options.SetNodeValue(doc, root, "datasetStroke", this.datasetStroke.ToString());
                Options.SetNodeValue(doc, root, "datasetStrokeWidth", this.datasetStrokeWidth.ToString());
                Options.SetNodeValue(doc, root, "onAnimationComplete", this.onAnimationComplete);
                //16
                Options.SetNodeValue(doc, root, "scaleFontColor", this.scaleFontColor);
                Options.SetNodeValue(doc, root, "scaleFontFamily", this.scaleFontFamily);
                Options.SetNodeValue(doc, root, "scaleFontStyle", this.scaleFontStyle);
                Options.SetNodeValue(doc, root, "scaleGridLineColor", this.scaleGridLineColor);
                Options.SetNodeValue(doc, root, "scaleLabel", this.scaleLabel);
                Options.SetNodeValue(doc, root, "scaleLineColor", this.scaleLineColor);
                Options.SetNodeValue(doc, root, "scaleFontSize", this.scaleFontSize.ToString());
                Options.SetNodeValue(doc, root, "scaleGridLineWidth", this.scaleGridLineWidth.ToString());
                Options.SetNodeValue(doc, root, "scaleLineWidth", this.scaleLineWidth.ToString());
                Options.SetNodeValue(doc, root, "scaleSteps", this.scaleSteps.ToString());
                Options.SetNodeValue(doc, root, "scaleStepWidth", this.scaleStepWidth.ToString());
                Options.SetNodeValue(doc, root, "scaleOverlay", this.scaleOverlay.ToString());
                Options.SetNodeValue(doc, root, "scaleOverride", this.scaleOverride.ToString());
                Options.SetNodeValue(doc, root, "scaleStartValue", this.scaleStartValue.ToString());
                Options.SetNodeValue(doc, root, "scaleShowLabels", this.scaleShowLabels.ToString());
                Options.SetNodeValue(doc, root, "scaleShowLabels", this.scaleShowGridLines.ToString());
                //3
                Options.SetNodeValue(doc, root, "pointDot", this.pointDot.ToString());
                Options.SetNodeValue(doc, root, "pointDotRadius", this.pointDotRadius.ToString());
                Options.SetNodeValue(doc, root, "pointDotStrokeWidth", this.pointDotStrokeWidth.ToString());
            }
    
            /// <summary>
            /// 从xml返回数据   
            /// </summary>
            /// <param name="doc"></param>
            /// <returns></returns>
            public static Options FromXml(XmlDocument doc)
            {
                XmlNode xmlNode = doc.SelectSingleNode("Options");
                return new Options()
                {
                    animationSteps = int.Parse(xmlNode.SelectSingleNode("animationSteps").InnerText),
                    animation = bool.Parse(xmlNode.SelectSingleNode("animation").InnerText),
                    animationEasing = xmlNode.SelectSingleNode("animationEasing").InnerText,
                    bezierCurve =bool.Parse( xmlNode.SelectSingleNode("animationEasing").InnerText),
                    datasetFill = bool.Parse(xmlNode.SelectSingleNode("datasetFill").InnerText),
                    datasetStroke = bool.Parse(xmlNode.SelectSingleNode("datasetStroke").InnerText),
                    datasetStrokeWidth = int.Parse(xmlNode.SelectSingleNode("datasetStrokeWidth").InnerText),
                    onAnimationComplete = xmlNode.SelectSingleNode("onAnimationComplete").InnerText,
                    scaleLineWidth = int.Parse(xmlNode.SelectSingleNode("scaleLineWidth").InnerText),
                    scaleFontSize = int.Parse(xmlNode.SelectSingleNode("datasetStrokeWidth").InnerText),
                    scaleOverride = bool.Parse(xmlNode.SelectSingleNode("scaleOverride").InnerText),
                    scaleFontStyle =(xmlNode.SelectSingleNode("scaleFontStyle").InnerText),
                    scaleStepWidth = int.Parse(xmlNode.SelectSingleNode("scaleStepWidth").InnerText),
                    scaleFontColor =(xmlNode.SelectSingleNode("scaleFontColor").InnerText),
                    scaleOverlay = bool.Parse(xmlNode.SelectSingleNode("scaleOverlay").InnerText),
                    scaleShowGridLines = bool.Parse(xmlNode.SelectSingleNode("scaleShowGridLines").InnerText),
                    scaleLabel = (xmlNode.SelectSingleNode("scaleLabel").InnerText),
                    scaleLineColor = (xmlNode.SelectSingleNode("scaleLineColor").InnerText),
                    scaleGridLineColor = (xmlNode.SelectSingleNode("scaleGridLineColor").InnerText),
                    scaleSteps = int.Parse(xmlNode.SelectSingleNode("scaleSteps").InnerText),
                    scaleGridLineWidth = int.Parse(xmlNode.SelectSingleNode("scaleGridLineWidth").InnerText),
                    scaleFontFamily =(xmlNode.SelectSingleNode("datasetStrokeWidth").InnerText),
                    scaleStartValue = int.Parse(xmlNode.SelectSingleNode("scaleStartValue").InnerText),
                    scaleShowLabels =bool.Parse(xmlNode.SelectSingleNode("scaleShowLabels").InnerText),
                    pointDotStrokeWidth =int.Parse(xmlNode.SelectSingleNode("pointDotStrokeWidth").InnerText),
                    pointDotRadius = int.Parse(xmlNode.SelectSingleNode("pointDotRadius").InnerText),
                    pointDot = bool.Parse(xmlNode.SelectSingleNode("pointDotRadius").InnerText)
                };
            }
            /// <summary>
            /// 赋值
            /// </summary>
            /// <param name="doc"></param>
            /// <param name="root"></param>
            /// <param name="nodeName"></param>
            /// <param name="nodeValue"></param>
            private static void SetNodeValue(XmlDocument doc, XmlNode root, string nodeName, string nodeValue)
            {
                XmlNode xmlNode = root.SelectSingleNode(nodeName);
                if (xmlNode == null)
                {
                    xmlNode = doc.CreateElement(nodeName);
                    root.AppendChild(xmlNode);
                }
                xmlNode.InnerText = nodeValue;
            }
        }
    #endregion
    }


     

    前台调用
    出现了

    // Provide some basic currying to the user
    return data ? fn( data ) : fn;

    引用: http://www.chartjs.org/assets/Chart.js

    <canvas id="myChart" width="400" height="400"></canvas>

    var ctx = $("#myChart").get(0).getContext("2d");
    //This will get the first returned node in the jQuery collection.
    var myNewChart = new Chart(ctx);
    var _data = { 'sss': 'test' };
    var options;
    var data;
    //new Chart(ctx).PolarArea(data, options); 极地地图
    $.ajax(
    {
    url: '@Url.Action("GetChartjsData","Stores")',
    type: 'POST',
    dataType: 'json',
    data: JSON.stringify(_data),
    contentType: 'application/json;charset=uft-8',
    success:function(datajson) {
    if (datajson != null) {
    options = datajson.options;
    data = datajson.data;

    var chartInstance = new Chart(ctx, {
        type: 'line',
        data: data,
        options: {
            responsive: false
        }
    });


    }
    }
    });

  • 相关阅读:
    < java.util >-- Set接口
    Codeforces 627 A. XOR Equation (数学)
    Codeforces 161 B. Discounts (贪心)
    Codeforces 161 D. Distance in Tree (树dp)
    HDU 5534 Partial Tree (完全背包变形)
    HDU 5927 Auxiliary Set (dfs)
    Codeforces 27E. Number With The Given Amount Of Divisors (暴力)
    lght oj 1257
    Codeforces 219D. Choosing Capital for Treeland (树dp)
    Codeforces 479E. Riding in a Lift (dp + 前缀和优化)
  • 原文地址:https://www.cnblogs.com/zxs-onestar/p/5823259.html
Copyright © 2011-2022 走看看