Mschart绘制图表之X轴为时间的设置方式
最近使用C#开发图表，比较了DirectorChart，DontNetCharting，TeeChart，最终选用微软的mschart开发，对于X轴作为时间轴探索了好久，终于实现了想要的效果。 界面效果：
核心代码：
源码 using Susing System.Collections.GponentMusing System.Dusing System.Dusing System.Tusing System.Windows.Fusing ComponentFactory.Krypton.Tusing System.Windows.Forms.DataVisualization.Cnamespace Krypton440Test{public partial class Form4 : ComponentFactory.Krypton.Toolkit.KryptonForm{public Form4(){ InitializeComponent();}private void Form4_Load(object sender, EventArgs e){ //清空原来数据缓存 chart1.Series[0].Points.Clear(); //定义图表大小尺寸 chart1.Width = Width - 100; chart1.Height = Height - 100; //定义X轴、Y轴数据 double[] Ydata = { 20, 3, 23 ,6}; DateTime[] Xdate = new DateTime[] { DateTime.Parse(&09:10:02&), DateTime.Parse(&09:10:10&),DateTime.Parse(&09:10:15&), DateTime.Parse(&09:10:20&) }; //以下按照先绘制chartArea、然后再绘制Series的步骤画图 //chartArea背景颜色 chart1.BackColor = Color.A //X轴设置 chart1.ChartAreas[0].AxisX.Title = &时间&; chart1.ChartAreas[0].AxisX.TitleAlignment = StringAlignment.N chart1.ChartAreas[0].AxisX.MajorGrid.Enabled =//不显示竖着的分割线 /************************************************************************/ /* 本文重点讲解时间格式的设置
* 如果想显示原点第一个时间坐标,需要设置最小时间,时间间隔类型，时间间隔值等三个参数*/ /************************************************************************/ chart1.ChartAreas[0].AxisX.LabelStyle.Format = &HH:mm:ss&; //X轴显示的时间格式，HH为大写时是24小时制，hh小写时是12小时制 chart1.ChartAreas[0].AxisX.Minimum = DateTime.Parse(&09:10:02&).ToOADate(); chart1.ChartAreas[0].AxisX.Maximum = DateTime.Parse(&09:10:21&).ToOADate(); chart1.ChartAreas[0].AxisX.IntervalType = DateTimeIntervalType.S//如果是时间类型的数据，间隔方式可以是秒、分、时 chart1.ChartAreas[0].AxisX.Interval = DateTime.Parse(&00:00:02&).S//间隔为1秒 //Y轴设置 chart1.ChartAreas[0].AxisY.Title = &数据点&; chart1.ChartAreas[0].AxisY.TitleAlignment = StringAlignment.C chart1.ChartAreas[0].AxisY.MajorGrid.Enabled =//显示横着的分割线 chart1.ChartAreas[0].AxisY.Minimum = 0; chart1.ChartAreas[0].AxisY.Maximum = 25; chart1.ChartAreas[0].AxisY.Interval = 5; //Series绘制 chart1.Series[0].LegendText = &温度点&; chart1.Series[0].ChartType = SeriesChartType.S chart1.Series[0].XValueType = ChartValueType.DateT chart1.Series[0].IsValueShownAsLabel =//显示数据点的值 chart1.Series[0].MarkerStyle = MarkerStyle.C //把数据点添加到Series图表中 for (int i = 0; i & Xdate.L i++) { chart1.Series[0].Points.AddXY(Xdate[i], Ydata[i]); }}}}
最新教程周点击榜
微信扫一扫网站配置未生效 |
| 百度云加速
请打开cookies.
你访问的网站() 使用了
网络。 百度云加速目前无法解析此域名 ().
主要因为: 网站主刚刚在百度云加速添加了这个域名，百度云加速需要几十秒的时间同步到全球网络中。稍等片刻刷新页面即可解决。
也有可能: 网站配置出错.HighCharts 图表插件 自定义绑定 时间轴数据 - 推酷
HighCharts 图表插件 自定义绑定 时间轴数据
HighCharts 图表插件 自定义绑定 时间轴数据，解决时间轴自动显示数据与实际绑定数据时间不对应问题！
可能要用到的源码片段：
学习示例如下：
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&title&喊单收益曲线图&/title&
&meta http-equiv=&Content-Type& content=&text/ charset=gb2312& /&
&script src=&jquery-1.4.2.min.js& type=&text/javascript&&&/script&
&script src=&highcharts.js& type=&text/javascript&&&/script&
&script src=&exporting.js& type=&text/javascript&&&/script&
&body style=&margin:&&
&!-- 喊单收益曲线图 --&
&div id=&container& style=&width: 100%; height: 100%; margin: 0 auto&&
&script type=&text/javascript& language=&javascript&&
* 官方文档： http://www.highcharts.me/
var chart, myTime = &&, myData = &&;
$(function () {
myData = &[-20.25,-12.30,-3.68,5.45,19.00,-2.78,-5.45,9.80,10.45,16.15]&;
options.series[0].data = eval(myData);
myTime = &[' 01:10',' 01:30',' 01:45',' 02:30',' 02:45',' 03:00',' 03:40',' 04:50',' 05:05',' 06:06']&;
options.xAxis.categories = eval(myTime);
//加载图表
chart = new Highcharts.Chart(options);
var options = {
renderTo: 'container',
zoomType: 'x'
text: '喊单收益曲线图'
subtitle: {
text: '点击并拖动绘图区域的放大'
text: null
formatter: function () {
return this.
text: '盈利率'
formatter: function () {
return this.value + &%&;
startOnTick: false,
showFirstLabel: false
tooltip: {
formatter: function () {
return '' + '日期：' + this.x
盈利率：' + Highcharts.numberFormat(this.y, 2) + &%&;
enabled: false
plotOptions: {
fillColor: {
linearGradient: [0, 0, 0, 300],
[0, '#4572A7'],
[1, 'rgba(2,0,0,0)']
lineWidth: 1,
enabled: false,
enabled: true,
shadow: false,
lineWidth: 1
series: [{
type: 'area',
name: '盈利率'
详细说明：
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致}