图表控件的学习===》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
    }
});

}
}
});