Charts (ChartView + subclasses)

dev.crossfly.ui.chart मॉड्यूल में एक साझा रेंडर कोर (ChartView, जो Component का विस्तार करता है) और 8 ठोस उपवर्ग हैं जो अनुशंसित प्रवेश बिंदु हैं — प्रत्येक प्रकार को पूर्व-कॉन्फ़िगर करता है और एर्गोनोमिक fluent मेथड्स प्रदान करता है:

🟡 · पैकेज: dev.crossfly.ui.chart · विस्तार करता है: Component · शैली: ComponentStyle

⚠️ 2026 पुनर्नामकरण: पुराने वर्ग LineChartView/BarChartView/PieChartView/ DonutChartView/ComboChartView को LineChart/BarChart/PieChart/ DonutChart/ComboChart में पुनर्नामित किया गया (View प्रत्यय हटाया गया)। और पाई/डोनट अब slice(...) का उपयोग करते हैं (न कि withSlice)।

कब उपयोग करें

• श्रेणी के अनुसार रुझान (लाइन/एरिया), परिमाण (बार), समय के साथ संरचना (स्टैक्ड), किसी पूरे का अनुपात (पाई/डोनट), या परिमाण + दर एक साथ (कॉम्बो)।

कब उपयोग न करें

• मनमाने X के साथ XY डिस्पर्शन, 3D या स्पीडोमीटर → समर्थित नहीं। मुक्त-हस्त ड्रॉइंग → whiteboard।

संपूर्ण उदाहरण (कॉपी करें, पेस्ट करें और चलाएँ)

CrossFly में आप एक Window वर्ग लिखते हैं (मुख्य स्क्रीन) — Main और launcher प्लेटफ़ॉर्म का boilerplate हैं। launcher को इस वर्ग की ओर इंगित करें (classname पैरामीटर) और gradlew :lwjgl3:run चलाएँ:

package com.exemplo;

import dev.crossfly.ui.*;          // Window, Component, LAY_FILL…
import dev.crossfly.ui.layout.*;   // VerticalLayout
import dev.crossfly.ui.chart.*;    // ChartView, LineChart…

/**
 * निष्पादन योग्य मुख्य स्क्रीन। launcher को इस क्लास (classname) पर सेट करें
 * और चलाएं: gradlew :lwjgl3:run
 */
public class MainWindow extends Window
{
   @Override
   public void onShow() throws Exception
   {
      super.onShow();
      setLayout(new VerticalLayout());

      LineChart line = new LineChart();
      line.withSeries("Revenue", new double[]{42, 55, 51, 68, 73, 88}, 0xFF42A5F5)
          .withSeries("Target",  new double[]{40, 50, 56, 60, 70, 82}, 0xFFAB47BC);
      line.title("Receita por mês");
      line.categories(new String[]{"Jan", "Feb", "Mar", "Apr", "May", "Jun"});
      line.smooth(true);            // Catmull-Rom
      line.yAxis(0, 100, 5);         // स्थिर Y रेंज (या autoYAxis())

      add(LAY_FILL, line);
   }
}

नीचे दिए गए स्निपेट केवल मूल भाग दिखाते हैं (जो onShow() के अंदर जाता है), ताकि फ़ीचर पर ध्यान केंद्रित रहे। चलाने के लिए, मूल भाग को ऊपर दिए MainWindow कंकाल के अंदर रखें।

बुनियादी उपयोग (उपवर्ग के अनुसार — अनुशंसित)

LineChart line = new LineChart();
line.withSeries("Revenue", new double[]{42, 55, 51, 68, 73, 88}, 0xFF42A5F5)
    .withSeries("Target",  new double[]{40, 50, 56, 60, 70, 82}, 0xFFAB47BC);
line.title("Receita por mês");
line.categories(new String[]{"Jan", "Feb", "Mar", "Apr", "May", "Jun"});
line.smooth(true);                       // Catmull-Rom
line.yAxis(0, 100, 5);                    // स्थिर Y रेंज (या autoYAxis())
add(LAY_FILL, line);

बार और स्टैक्ड बार

BarChart bar = new BarChart();
bar.withSeries("North", new double[]{120, 140, 138, 165}, 0xFF5C6BC0)
   .withSeries("South", new double[]{95, 110, 123, 131}, 0xFF26C6DA);
bar.title("Vendas trimestrais").categories(new String[]{"Q1", "Q2", "Q3", "Q4"});

StackedBarChart stacked = new StackedBarChart();
stacked.series("Direct",  new double[]{6.2, 13.7, 19.9, 8}, 0xFF1976D2)
       .series("Mail Ad", new double[]{18.2, 11, 8, 17.8}, 0xFF81C784);
stacked.yAxis(0, 100, 5);

एरिया और स्टैक्ड एरिया

AreaChart area = new AreaChart();
area.withSeries("Load", new double[]{180, 260, 210, 300, 280}, 0xFF26C6DA);
area.areaOpacity(110);                    // भराव का alpha 0–255

StackedAreaChart sarea = new StackedAreaChart();
sarea.series("Line 1", new double[]{140, 232, 101, 264}, 0xFF6DDB92)
     .series("Line 2", new double[]{120, 282, 111, 234}, 0xFF00D4FF);
sarea.areaOpacity(210);
sarea.decimals = 0;                        // फाइन-ट्यूनिंग के लिए सार्वजनिक फील्ड

पाई और डोनट

PieChart pie = new PieChart();
pie.slice("Organic", 38, 0xFF42A5F5)
   .slice("Paid",    24, 0xFFAB47BC)
   .slice("Social",  20, 0xFF26A69A);
pie.title("Fontes de tráfego");

DonutChart donut = new DonutChart();
donut.slice("Organic", 38).slice("Paid", 24).slice("Social", 20)
     .hole(0.58f);                          // छेद की त्रिज्या [0..0.95]

कॉम्बो (द्वितीयक अक्ष पर बार + लाइन)

ComboChart combo = new ComboChart();
combo.addBarSeries("Sessions",     new double[]{1000, 1250, 1180, 1340}, 0xFF90CAF9)
     .addLineSeries("Conversion %", new double[]{2.8, 3.1, 2.9, 3.4}, 0xFF1E88E5);  // दायां Y अक्ष
combo.title("Conversão x Sessões").yAxis(0, 1600, 8);

डेटा मॉडल

• ChartView.Series (कार्तीय): new Series(nome, double[] valores[, cor]); fluent .line() / .bar() renderMode परिभाषित करते हैं (कॉम्बो में उपयोग होता है)।
• ChartView.PieSlice (रेडियल): new PieSlice(nome, double valor[, cor])।
• रंग 0 = स्वचालित (DEFAULT_COLORS पैलेट, 9 रंग)। स्थिर रंग के लिए ARGB alpha के साथ उपयोग करें (0xFF…)।

कॉन्फ़िगरेशन (सार्वजनिक फ़ील्ड + fluent)

सार्वजनिक फ़ील्ड को किसी fluent मेथड के बाहर बदलने के बाद, repaint() कॉल करें।

कॉलबैक और अवस्थाएँ

• onAction(Action) चयन बदलने पर ट्रिगर होता है (बिंदु/बार/स्लाइस) — runActions() के माध्यम से। selectedSeries+selectedIndex (कार्तीय) या selectedSlice (रेडियल) पढ़ें; -1 = कुछ नहीं।
• इंटरैक्शन onTouchUp (निकटतम को चुनता है) और onHover (कर्सर के नीचे हाइलाइट करता है) के माध्यम से। कोई onClick नहीं है।

शैली

किसी भी Component की तरह: chart.getStyle().backColor(...)/borderColor(...); साझा वाले को बदले बिना व्युत्पन्न करने के लिए .copy() का उपयोग करें:

chart.style(chart.getStyle().copy().backColor(0xFFFFFFFF).borderColor(0xFFE0E0E0));

अच्छे तरीके

• कच्चे ChartView की जगह ठोस उपवर्ग (LineChart, BarChart…) को प्राथमिकता दें — fluent मेथड्स अधिक स्पष्ट हैं।
• कार्तीय series/withSeries का उपयोग करता है; रेडियल slices/slice का — एक ही प्रकार में मिश्रण न करें।
• स्थिर अक्षों के लिए yAxis(min,max,steps) तय करें (स्वचालित मोड शून्य शामिल करता है और “समतल” कर सकता है)।

सामान्य गलतियाँ

• पुराने नाम LineChartView/PieChartView… (पुनर्नामित) या withSlice (अब slice) का उपयोग करना।
• काले की अपेक्षा में 0x00… रंग पास करना: 0 “स्वचालित” है और alpha 00 अदृश्य है — 0xFF000000 का उपयोग करें।
• onClick की अपेक्षा करना: इंटरैक्शन चयन/hover द्वारा ट्रिगर किए गए onAction के माध्यम से है।

यह भी देखें

• ui/ · cookbook/ · whiteboard