Ana içeriğe geç

Çizgi Grafik

Line Chart bileşeni verileri çizgi grafik biçiminde görüntüler. Bileşen, verilerdeki eğilimleri görselleştirmek için kullanılabilir.

Çizgi Tanımları

Bir çizgi tanımı, grafik içindeki tek bir çizgiyi belirtir. Şu özellikle eşleşen her veri öğesi için XPath yeni bir çizgi oluşturulur. Çizginin değeri YValueXPathile, etiketi ise LabelXPath.

ile belirlenir. Bir çizgi için statik etiket görüntülemek amacıyla, istenen etiket metnini LabelXPath özelliğinin içine tek tırnak işaretleriyle alın. Örneğin bir çubuğu "Satış" olarak etiketlemek için LabelXPath değerini şu şekilde ayarlayın: 'Sales'.

XML Alanları

  • XPath form verisi bağlamını oluşturur. Width, Heightve Title/Content grafik çerçevesini ve başlığını denetler.
  • XAxisValueFormat ve YAxisValueFormat seçenekleri ilgili eksenleri için Numeric veya Date biçimlendirmesini seçer. XAxisLabel/Content ve YAxisLabel/Content eksen başlıklarını sağlar.
  • Her Lines/Line bir seri tanımlar. XPath kaynak koleksiyonu seçer ve DataXPath bu koleksiyondaki satırları seçer (* doğrudan alt öğeleri seçer).
  • XValueXPath ve YValueXPath her noktanın koordinatlarını seçer; LabelXPath seri etiketini sağlar. Tırnak içine alınmış bir etiket yolu statik etikettir.

LineChart yalnızca seçilen değerleri görselleştirir. Noktaları, etiketleri veya biçim ayarlarını form verilerine hiçbir zaman yazmaz.

Örnek

Olay verilerini temsil eden bir veri modelini ele alalım:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<Trend>
    <Incidents>
        <Row>
            <Date>2015-02-02</Date>
            <Count>1</Count>
        </Row>
        <Row>
            <Date>2016-02-01</Date>
            <Count>5</Count>
        </Row>
        <Row>
            <Date>2017-03-08</Date>
            <Count>7</Count>
        </Row>
    </Incidents>
    <Problems>
        <Row>
            <Date>2015-02-02</Date>
            <Count>1</Count>
        </Row>
        <Row>
            <Date>2016-02-01</Date>
            <Count>3</Count>
        </Row>
        <Row>
            <Date>2017-03-08</Date>
            <Count>2</Count>
        </Row>
    </Problems>
</Trend>

Aşağıdaki LineChart yapılandırması bu verileri oluşturur:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<LineChart Width="" Height="200" XPath="">
    <Title>
        <Content><![CDATA[Incidents vs Problems]]></Content>
    </Title>
    <XAxisValueFormat>Date</XAxisValueFormat>
    <XAxisLabel>
        <Content><![CDATA[Time]]></Content>
    </XAxisLabel>
    <YAxisValueFormat>Numeric</YAxisValueFormat>
    <YAxisLabel>
        <Content><![CDATA[Count]]></Content>
    </YAxisLabel>
    <Lines>
        <Line>
            <XPath><![CDATA[Trend/Incidents]]></XPath>
            <DataXPath><![CDATA[*]]></DataXPath>
            <XValueXPath><![CDATA[Date]]></XValueXPath>
            <YValueXPath><![CDATA[Count]]></YValueXPath>
            <LabelXPath><![CDATA['Incident']]></LabelXPath>
        </Line>
        <Line>
            <XPath><![CDATA[Trend/Problems]]></XPath>
            <DataXPath><![CDATA[*]]></DataXPath>
            <XValueXPath><![CDATA[Date]]></XValueXPath>
            <YValueXPath><![CDATA[Count]]></YValueXPath>
            <LabelXPath><![CDATA['Problem']]></LabelXPath>
        </Line>
    </Lines>
</LineChart>

Bu yapılandırma, biri olaylar diğeri sorunlar için olmak üzere iki çizgili bir grafik oluşturur. Grafik, zaman içindeki olay ve sorun sayılarını görüntüler; X ekseni tarihi, Y ekseni ise sayıyı temsil eder.

grafik