Ana içeriğe geç

Çizgi Grafik

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

Çizgi Tanımları

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

ile belirlenir. Bir çizgi için statik etiket görüntülemek üzere istediğiniz etiket metnini tek tırnak içine alın LabelXPath özelliği içinde. Örneğin, bir çubuğa "Satışlar" etiketini vermek için LabelXPath değerini 'Sales'.

XML Alanları

  • XPath Form verisi bağlamını belirler. Width, Height, ve Title/Content grafik çerçevesini ve başlığını denetler.
  • XAxisValueFormat ve YAxisValueFormat seçimini Numeric veya Date ilgili eksenlerinin biçimlendirmesini belirler. XAxisLabel/Content ve YAxisLabel/Content eksen açıklamaları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 verisine 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 görüntüler:

 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 çizgi grafik oluşturur. Grafik, olay ve sorun sayılarını zaman içinde görüntüler; X ekseni tarihi, Y ekseni ise sayıyı temsil eder.

grafik