C1LineChart创建自定义的线形图表

ASP.NET Wijmo的C1LineChart集成了折线图、面积图和样条曲线图。折线图可以将每个系列绘制为数据的连接点，并且包含丰富的定制和动画。

本文介绍如何用C1LineChart创建自定义的线形图表，附件Demo中的代码展示了如何在图表中增加标题；如何格式化坐标轴；如何增加图表标签；如何计算图表的数据。

具体步骤如下。

添加C1LineChart控件到web程序中

设置C1LineChart

通过C1LineChart.Header.Text添加标题。通过C1LineChart.ShowChartLabels属性设置是否显示图表标签。并用ChartLabelStyle属性设置标签的样式。通过C1LineChart.Axis设置X、Y轴的信息，包括文字格式、显示位置、文字样式等。通过C1LineChart.Hint设置是否显示提示信息以及如何显示提示信息，包含提示信息的动画效果、显示方式、延迟等。通过C1LineChart.Aimation设置是否显示动画以及动画延迟等。

具体代码如下：

<wijmo:C1LineChart runat="server" ID="C1LineChart1" ShowChartLabels="False" Height="475" Width="756">

</Header>

</Footer>

</Legend>

</Hint>

</wijmo:C1LineChart>

设置C1LineChart系列

在页面载入的时候通过代码添加C1LineChart的系列，创建LineChartSeries并通过C1LineChart.SeriesList.Add添加到里面。可以对系列的各个属性设置，比如，设置系列的标记类型，系列的标签等。调用下面的代码在PageLoad事件里，实现上述功能。

//Invoke in Page Load event
 private void PrepareOptions()
        {
            var valuesX = new List(){new DateTime(2010, 10, 27, 11, 48, 0), new DateTime(2010, 10, 27, 13, 47, 0), new DateTime(2010, 10, 27, 15, 46, 0), new DateTime(2010, 10, 27, 17, 45, 0), 
            new DateTime(2010, 10, 27, 19, 44, 0), new DateTime(2010, 10, 27, 21, 43, 0), new DateTime(2010, 10, 27, 23, 41, 0), new DateTime(2010, 10, 28, 1, 40, 0), new DateTime(2010, 10, 28, 3, 39, 0), 
            new DateTime(2010, 10, 28, 5, 38, 0), new DateTime(2010, 10, 28, 7, 37, 0), new DateTime(2010, 10, 28, 9, 36, 0), new DateTime(2010, 10, 28, 11, 35, 0), new DateTime(2010, 10, 28, 13, 34, 0), 
            new DateTime(2010, 10, 28, 15, 33, 0), new DateTime(2010, 10, 28, 17, 32, 0), new DateTime(2010, 10, 28, 19, 31, 0), new DateTime(2010, 10, 28, 21, 30, 0), new DateTime(2010, 10, 28, 23, 38, 0), 
            new DateTime(2010, 10, 29, 1, 27, 0), new DateTime(2010, 10, 29, 3, 26, 0), new DateTime(2010, 10, 29, 5, 25, 0), new DateTime(2010, 10, 29, 7, 24, 0), new DateTime(2010, 10, 29, 9, 23, 0), new DateTime(2010, 10, 29, 11, 22, 0)};
            var valuesY = new List() { 2665513, 2300921, 1663229, 1622528, 1472847, 1354026, 1348909, 1514946, 1746392, 2020481, 2312976, 2539210, 2657505, 2369938, 1869805, 1648695, 1529983, 1398148, 1389668, 1568134, 1787466, 2101460, 2090771, 2351994, 2537400 };

            //serieslist
            var series = new LineChartSeries();
            this.C1LineChart1.SeriesList.Add(series);
            series.Markers.Visible = true;
            series.Markers.Type = MarkerType.Circle;
            series.Data.X.AddRange(valuesX.ToArray());
            series.Data.Y.AddRange(valuesY.ToArray());
            series.Label = "Users";
            series.LegendEntry = true;
        }

通过上述步骤，可以实现本文附件Demo中的C1LineChart，效果如下图所示。

加载页面的时候会有动画效果，鼠标停留在数据点的时候，提示信息也会有动画效果

本文demo的源代码如下：

C1LineChart-overview.7z (3.85 mb)

ComponentOne Enterprise | 下载试用

ComponentOne 是一套专注于企业 .NET开发、支持 .NET Core 平台，并完美集成于 Visual Studio 的第三方控件集，包含 300 多种 .NET开发控件，提供表格数据管理、数据可视化、报表和文档、日程安排、输入和编辑、导航和布局、系统提升工具等七大功能，被誉为“.NET开发的‘瑞士军刀’”。

ComponentOne 为您提供专业的产品咨询服务，并由技术支持工程师为您1对1解答。>> 发帖提问