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
}
});
}
}
});