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">
    <Animation Duration="2000"></Animation>
    <Header Text="在线用户">
    </Header>
    <Footer Compass="South" Visible="False">
    </Footer>
    <Legend Visible="false">
    </Legend>
    <Hint OffsetY="-10">
        <Content Function="hintContent" />
    </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，效果如下图所示。