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)

关于葡萄城

葡萄城是专业的软件开发技术和低代码平台提供商，以“赋能开发者”为使命，致力于通过表格控件、低代码和BI等各类软件开发工具和服务，一站式满足开发者需求，帮助企业提升开发效率并创新开发模式。葡萄城开发技术始于1980年，40余年来始终聚焦软件开发技术，有深厚的技术积累和丰富的产品线。是业界能够同时赋能软件开发和低代码开发的企业。凭借过硬的产品能力、活跃的用户社区和丰富的伙伴生态，与超过3000家合作伙伴紧密合作，产品广泛应用于信息和软件服务、制造、交通运输、建筑、金融、能源、教育、公共管理等支柱产业。