इस पेज का अनुवाद Cloud Translation API से किया गया है.

वेगाचार्ट

खास जानकारी
एक आसान उदाहरण
लोड हो रहा है
डेटा फ़ॉर्मैट
कॉन्फ़िगरेशन के विकल्प
तरीके
इवेंट
डेटा नीति

खास जानकारी

VegaChart ऐसे कई संभावित विज़ुअलाइज़ेशन में से एक है जिसे Vega विज़ुअलाइज़ेशन ग्रामर का इस्तेमाल करके बनाया जा सकता है. यह इंटरैक्टिव विज़ुअलाइज़ेशन डिज़ाइन बनाने, सेव करने, और शेयर करने के लिए इस्तेमाल किया जाता है. Vega से, JSON फ़ॉर्मैट में विज़ुअलाइज़ेशन के दिखने के तरीके और इंटरैक्टिव व्यवहार के बारे में बताया जा सकता है. साथ ही, कैनवस या SVG का इस्तेमाल करके, वेब पर आधारित व्यू जनरेट किए जा सकते हैं.

Vegaचार्ट बनाते समय, आपको विकल्प के तौर पर वेगा विज़ुअलाइज़ेशन व्याकरण में चार्ट बनाने के तरीके के स्पेसिफ़िकेशन शामिल करने होंगे. नीचे इस तरह के स्पेसिफ़िकेशन के कुछ उदाहरण दिए गए हैं. इनके कई उदाहरण VegaChart के उदाहरण पेज पर दिए गए हैं.

ध्यान दें: Wegaचार्ट में कोई भी वेगा चार्ट बनाया जा सकता है, जिसके बारे में आप Vega JSON स्पेसिफ़िकेशन (जिसमें उदाहरण के तौर पर दी गई गैलरी में मौजूद सभी जानकारी शामिल हैं) बना सकते हैं, लेकिन वे सुविधाएं फ़िलहाल उपलब्ध नहीं हैं जिनका इस्तेमाल Vega API में कॉल करने के लिए किया जाता है.

बार चार्ट का एक आसान उदाहरण

यहां एक बार चार्ट बनाने वाले Vegaचार्ट का उदाहरण दिया गया है. (मूल उदाहरण, ज़्यादा जानकारी देने वाला ट्यूटोरियल, और Vega चार्ट एडिटर में बार चार्ट देखें).)

यह Google चार्ट में बार चार्ट बनाने का एक और तरीका है. हालांकि, हम बार और कॉलम चार्ट की सभी सुविधाओं को इस वेगाचार्ट के आधार पर नए तरीके से इंटिग्रेट करने की योजना बना रहे हैं.

इस उदाहरण में, ध्यान दें कि 'डेटा' विकल्प को नीचे दिए गए विकल्प से बदल दिया गया है. यह विकल्प ' टेबल' नाम के डेटा ऑब्जेक्ट के लिए 'स्रोत' के तौर पर ड्रॉ कॉल से मिलने वाले 'डेटाटेबल' का इस्तेमाल करता है. साथ ही, Vega के बाकी हिस्से में 'टेबल' का इस्तेमाल किया जाता है.

  'data': [{'name': 'table', 'source': 'datatable'}],

google.charts.load('upcoming', {'packages': ['vegachart']}).then(drawChart);

function drawChart() {
        const dataTable = new google.visualization.DataTable();
        dataTable.addColumn({type: 'string', 'id': 'category'});
        dataTable.addColumn({type: 'number', 'id': 'amount'});
        dataTable.addRows([
          ['A', 28],
          ['B', 55],
          ['C', 43],
          ['D', 91],
          ['E', 81],
          ['F', 53],
          ['G', 19],
          ['H', 87],
        ]);

const options = {
          "vega": {
            "$schema": "https://vega.github.io/schema/vega/v4.json",
            "width": 500,
            "height": 200,
            "padding": 5,

'data': [{'name': 'table', 'source': 'datatable'}],

"signals": [
              {
                "name": "tooltip",
                "value": {},
                "on": [
                  {"events": "rect:mouseover", "update": "datum"},
                  {"events": "rect:mouseout",  "update": "{}"}
                ]
              }
            ],

"scales": [
              {
                "name": "xscale",
                "type": "band",
                "domain": {"data": "table", "field": "category"},
                "range": "width",
                "padding": 0.05,
                "round": true
              },
              {
                "name": "yscale",
                "domain": {"data": "table", "field": "amount"},
                "nice": true,
                "range": "height"
              }
            ],

"axes": [
              { "orient": "bottom", "scale": "xscale" },
              { "orient": "left", "scale": "yscale" }
            ],

"marks": [
              {
                "type": "rect",
                "from": {"data":"table"},
                "encode": {
                  "enter": {
                    "x": {"scale": "xscale", "field": "category"},
                    "width": {"scale": "xscale", "band": 1},
                    "y": {"scale": "yscale", "field": "amount"},
                    "y2": {"scale": "yscale", "value": 0}
                  },
                  "update": {
                    "fill": {"value": "steelblue"}
                  },
                  "hover": {
                    "fill": {"value": "red"}
                  }
                }
              },
              {
                "type": "text",
                "encode": {
                  "enter": {
                    "align": {"value": "center"},
                    "baseline": {"value": "bottom"},
                    "fill": {"value": "#333"}
                  },
                  "update": {
                    "x": {"scale": "xscale", "signal": "tooltip.category", "band": 0.5},
                    "y": {"scale": "yscale", "signal": "tooltip.amount", "offset": -2},
                    "text": {"signal": "tooltip.amount"},
                    "fillOpacity": [
                      {"test": "datum === tooltip", "value": 0},
                      {"value": 1}
                    ]
                  }
                }
              }
            ]
          }
        };

const chart = new google.visualization.VegaChart(document.getElementById('chart-div'));
        chart.draw(dataTable, options);
      }

<html>
  <head>
    <script src='https://www.gstatic.com/charts/loader.js'></script>
    <script>
      google.charts.load('upcoming', {'packages': ['vegachart']}).then(drawChart);

      function drawChart() {
        const dataTable = new google.visualization.DataTable();
        dataTable.addColumn({type: 'string', 'id': 'category'});
        dataTable.addColumn({type: 'number', 'id': 'amount'});
        dataTable.addRows([
          ['A', 28],
          ['B', 55],
          ['C', 43],
          ['D', 91],
          ['E', 81],
          ['F', 53],
          ['G', 19],
          ['H', 87],
        ]);

        const options = {
          "vega": {
            "$schema": "https://vega.github.io/schema/vega/v4.json",
            "width": 500,
            "height": 200,
            "padding": 5,

            'data': [{'name': 'table', 'source': 'datatable'}],

            "signals": [
              {
                "name": "tooltip",
                "value": {},
                "on": [
                  {"events": "rect:mouseover", "update": "datum"},
                  {"events": "rect:mouseout",  "update": "{}"}
                ]
              }
            ],

            "scales": [
              {
                "name": "xscale",
                "type": "band",
                "domain": {"data": "table", "field": "category"},
                "range": "width",
                "padding": 0.05,
                "round": true
              },
              {
                "name": "yscale",
                "domain": {"data": "table", "field": "amount"},
                "nice": true,
                "range": "height"
              }
            ],

            "axes": [
              { "orient": "bottom", "scale": "xscale" },
              { "orient": "left", "scale": "yscale" }
            ],

            "marks": [
              {
                "type": "rect",
                "from": {"data":"table"},
                "encode": {
                  "enter": {
                    "x": {"scale": "xscale", "field": "category"},
                    "width": {"scale": "xscale", "band": 1},
                    "y": {"scale": "yscale", "field": "amount"},
                    "y2": {"scale": "yscale", "value": 0}
                  },
                  "update": {
                    "fill": {"value": "steelblue"}
                  },
                  "hover": {
                    "fill": {"value": "red"}
                  }
                }
              },
              {
                "type": "text",
                "encode": {
                  "enter": {
                    "align": {"value": "center"},
                    "baseline": {"value": "bottom"},
                    "fill": {"value": "#333"}
                  },
                  "update": {
                    "x": {"scale": "xscale", "signal": "tooltip.category", "band": 0.5},
                    "y": {"scale": "yscale", "signal": "tooltip.amount", "offset": -2},
                    "text": {"signal": "tooltip.amount"},
                    "fillOpacity": [
                      {"test": "datum === tooltip", "value": 0},
                      {"value": 1}
                    ]
                  }
                }
              }
            ]
          }
        };

        const chart = new google.visualization.VegaChart(document.getElementById('chart-div'));
        chart.draw(dataTable, options);
      }
    </script>
  </head>

  <body>
    <div id="chart-div" style="width: 700px; height: 250px;"></div>
  </body>

</html>

लोड हो रहा है

google.charts.load पैकेज का नाम "vegachart" है.

google.charts.load("current", {packages: ["vegachart"]});

विज़ुअलाइज़ेशन की क्लास का नाम google.visualization.VegaChart है.

var visualization = new google.visualization.VegaChart(container);

डेटा फ़ॉर्मैट

DataTable (या DataView) का इस्तेमाल करके डेटा को ठीक उसी तरह से अन्य Google चार्ट में पास किया जा सकता है. मुख्य अंतर यह है कि कॉलम के क्रम का इस्तेमाल करके यह तय किया जाता है कि उनका इस्तेमाल कैसे किया जाता है. वेगा चार्ट, हर कॉलम के आईडी के आधार पर, उस खास तरह के वेगा विज़ुअलाइज़ेशन के लिए अनुमान पर निर्भर करता है. उदाहरण के लिए, यह DataTable उन कॉलम के साथ बनाया जाता है जिनमें 'category' और 'amount' के लिए आईडी होते हैं. साथ ही, इन कॉलम को रेफ़र करने के लिए, 'vega' विकल्प में उसी आईडी का इस्तेमाल किया जाता है.

DataTable का इस्तेमाल करके

        const dataTable = new google.visualization.DataTable();
        dataTable.addColumn({type: 'string', 'id': 'category'});
        dataTable.addColumn({type: 'number', 'id': 'amount'});
        dataTable.addRows([
          ['A', 28],
          ['B', 55],
          ['C', 43],
        ]);

        const options = {
          'vega': {
            ...
            // Here we create the Vega data object named 'datatable',
            // which will be passed in via the draw() call with a DataTable.
            'data': {'name': 'datatable'},

            'scales': [
              {
                'name': 'yscale',
                // Here is an example of how to use the 'amount' field from 'datatable'.
                'domain': {'data': 'datatable', 'field': 'amount'},
              }
            ]
          }
        };

        const chart = new google.visualization.VegaChart(
          document.getElementById('chart-div'));
        chart.draw(dataTable, options);

Wega के इनलाइन डेटा के साथ

        // A DataTable is required, but it may be empty.
        const dataTable = new google.visualization.DataTable();
        const options = {
          'vega': {
            // Here the data is specified inline in the Vega specification.
            "data": [
              {
               "name": "table",
                "values": [
                  {"category": "A", "amount": 28},
                  {"category": "B", "amount": 55},
                  {"category": "C", "amount": 43},
                ]
              }
            ],

            'scales': [
              {
                'name': 'yscale',
                // Here is how Vega normally uses the 'amount' field from 'table'.
                "domain": {"data": "table", "field": "category"},
              }
            ]
          }
        };

        const chart = new google.visualization.VegaChart(
          document.getElementById('chart-div'));
        chart.draw(dataTable, options);

हालांकि, इस तरह से एक डेटा टेबल ही VegaChart में पास किया जा सकता है, जबकि कुछ Vega चार्ट में एक से ज़्यादा डेटा टेबल की ज़रूरत होती है. हम इस सीमा को, Google चार्ट के आने वाले वर्शन में ठीक कर देंगे.

इस बीच, 'vega' 'data' के विकल्प में इस्तेमाल करने के लिए कोई भी अतिरिक्त डेटा तय किया जा सकता है. इसके लिए, इनलाइन करें या यूआरएल से लोड करें. दोनों के उदाहरण नीचे दिए गए हैं.

कॉन्फ़िगरेशन विकल्प

नाम
चार्टक्षेत्र	सदस्यों के साथ एक ऑब्जेक्ट, जो चार्ट एरिया (जहां कि चार्ट खुद बनाया जाता है) के प्लेसमेंट और साइज़ को कॉन्फ़िगर करने के लिए इस्तेमाल किया जा सकता है. हालांकि, ऐक्सिस और लेजेंड को शामिल नहीं किया जा सकता. इसके लिए दो फ़ॉर्मैट इस्तेमाल किए जा सकते हैं: कोई संख्या या कोई संख्या और उसके बाद %. साधारण संख्या किसी मान को पिक्सल में दिखाती है और संख्या के बाद % होता है. उदाहरण: `chartArea:{left:20,top:0,width:'50%',height:'75%'}` टाइप: ऑब्जेक्ट डिफ़ॉल्ट: शून्य
चार्टएरिया	चार्ट को नीचे वाले बॉर्डर से कितनी दूर तक खींचना है. टाइप: संख्या या स्ट्रिंग डिफ़ॉल्ट: अपने-आप
चार्टएरिया	चार्ट को बाएं बॉर्डर से कितनी दूर बनाना है. टाइप: संख्या या स्ट्रिंग डिफ़ॉल्ट: अपने-आप
चार्टएरिया	चार्ट को दाएं बॉर्डर से कितनी दूर बनाना है. टाइप: संख्या या स्ट्रिंग डिफ़ॉल्ट: अपने-आप
चार्टएरिया	चार्ट को ऊपर की सीमा से कितना दूर बनाना है. टाइप: संख्या या स्ट्रिंग डिफ़ॉल्ट: अपने-आप
चार्टएरिया	चार्ट एरिया की चौड़ाई. टाइप: संख्या या स्ट्रिंग डिफ़ॉल्ट: अपने-आप
चार्टएरीयल ऊंचाई	चार्ट एरिया की ऊंचाई. टाइप: संख्या या स्ट्रिंग डिफ़ॉल्ट: अपने-आप
ऊंचाई	चार्ट की ऊंचाई, पिक्सल में. टाइप: नंबर डिफ़ॉल्ट: शामिल एलिमेंट की ऊंचाई
width	चार्ट की चौड़ाई, पिक्सल में. टाइप: नंबर डिफ़ॉल्ट: शामिल एलिमेंट की चौड़ाई

तरीके

तरीका
`draw(data, options)`	चार्ट ड्रॉ करता है. चार्ट में, `ready`इवेंट के चालू होने के बाद ही दूसरे तरीके से कॉल किए जा सकते हैं. `Extended description`. सामान लौटाने का टाइप: कोई नहीं
`getAction(actionID)`	अनुरोध की गई `actionID` के साथ टूलटिप कार्रवाई ऑब्जेक्ट दिखाता है. सामान लौटाने का टाइप: ऑब्जेक्ट
`getBoundingBox(id)`	चार्ट एलिमेंट की बाईं, ऊपर, चौड़ाई, और ऊंचाई वाले ऑब्जेक्ट को दिखाता है `id`. `id` के फ़ॉर्मैट को अभी तक दस्तावेज़ में शामिल नहीं किया गया है (ये इवेंट हैंडलर की रिटर्न वैल्यू हैं), लेकिन यहां कुछ उदाहरण दिए गए हैं: `var cli = chart.getChartLayoutInterface();` चार्ट एरिया की ऊंचाई `cli.getBoundingBox('chartarea').height` किसी बार या कॉलम चार्ट की पहली सीरीज़ में तीसरे बार की चौड़ाई `cli.getBoundingBox('bar#0#2').width` पाई चार्ट की पांचवीं खूंटी (वेज) वाला बॉक्स `cli.getBoundingBox('slice#4')` किसी वर्टिकल (उदाहरण, कॉलम) चार्ट के चार्ट डेटा के चारों ओर मौजूद बॉक्स: `cli.getBoundingBox('vAxis#0#gridline')` हॉरिज़ॉन्टल (उदाहरण के लिए, बार) चार्ट के चार्ट डेटा के चारों ओर मौजूद बॉक्स: `cli.getBoundingBox('hAxis#0#gridline')` वैल्यू, चार्ट के कंटेनर के हिसाब से होती हैं. इसे चार्ट बनाने के बाद कॉल करें. सामान लौटाने का टाइप: ऑब्जेक्ट
`getChartAreaBoundingBox()`	चार्ट कॉन्टेंट के बाएं, ऊपर, चौड़ाई, और ऊंचाई वाले ऑब्जेक्ट को दिखाता है (यानी, लेबल और लेजेंड को छोड़कर): `var cli = chart.getChartLayoutInterface();` `cli.getChartAreaBoundingBox().left` `cli.getChartAreaBoundingBox().top` `cli.getChartAreaBoundingBox().height` `cli.getChartAreaBoundingBox().width` वैल्यू, चार्ट के कंटेनर के हिसाब से होती हैं. इसे चार्ट बनाने के बाद कॉल करें. सामान लौटाने का टाइप: ऑब्जेक्ट
`getChartLayoutInterface()`	ऑब्जेक्ट को चार्ट के ऑनस्क्रीन प्लेसमेंट और उसके एलिमेंट के बारे में जानकारी देता है. दिए गए ऑब्जेक्ट पर, इन तरीकों को कॉल किया जा सकता है: `getBoundingBox` `getChartAreaBoundingBox` `getHAxisValue` `getVAxisValue` `getXLocation` `getYLocation` इसे चार्ट बनाने के बाद कॉल करें. सामान लौटाने का टाइप: ऑब्जेक्ट
`getHAxisValue(xPosition, optional_axis_index)`	`xPosition` पर मौजूद हॉरिज़ॉन्टल डेटा वैल्यू दिखाता है, जो चार्ट कंटेनर के बाएं किनारे से पिक्सल ऑफ़सेट होता है. नकारात्मक हो सकती है. उदाहरण: `chart.getChartLayoutInterface().getHAxisValue(400)`. इसे चार्ट बनाने के बाद कॉल करें. सामान लौटाने का टाइप: नंबर
`getImageURI()`	चार्ट को चित्र यूआरआई के रूप में क्रमांकित करता है. इसे चार्ट बनाने के बाद कॉल करें. PNG चार्ट प्रिंट करना देखें. सामान लौटाने का टाइप: स्ट्रिंग
`getSelection()`	चुनी गई चार्ट इकाइयों की श्रेणी दिखाता है. इस चार्ट के लिए, किसी भी समय सिर्फ़ एक इकाई को चुना जा सकता है. `Extended description` . लौटाए गए आइटम का टाइप: चुने गए एलिमेंट की कैटगरी
`getVAxisValue(yPosition, optional_axis_index)`	वर्टिकल डेटा वैल्यू `yPosition` पर दिखाता है. यह चार्ट कंटेनर के सबसे ऊपरी किनारे से नीचे की ओर, पिक्सल ऑफ़सेट होता है. नकारात्मक हो सकती है. उदाहरण: `chart.getChartLayoutInterface().getVAxisValue(300)`. इसे चार्ट बनाने के बाद कॉल करें. सामान लौटाने का टाइप: नंबर
`getXLocation(dataValue, optional_axis_index)`	चार्ट के कंटेनर के बाएं किनारे के मुकाबले `dataValue` का पिक्सल x-कोऑर्डिनेट दिखाता है. उदाहरण: `chart.getChartLayoutInterface().getXLocation(400)`. इसे चार्ट बनाने के बाद कॉल करें. सामान लौटाने का टाइप: नंबर
`getYLocation(dataValue, optional_axis_index)`	चार्ट के कंटेनर के ऊपरी किनारे की तुलना में `dataValue` का पिक्सल y-कोऑर्डिनेट दिखाता है. उदाहरण: `chart.getChartLayoutInterface().getYLocation(300)`. इसे चार्ट बनाने के बाद कॉल करें. सामान लौटाने का टाइप: नंबर
`removeAction(actionID)`	अनुरोध किए गए `actionID` से टूलटिप कार्रवाई को हटा देता है. सामान लौटाने का टाइप: `none`
`setAction(action)`	जब उपयोगकर्ता कार्रवाई के टेक्स्ट पर क्लिक करता है, तो होने वाली कार्रवाई के लिए एक टूलटिप सेट करता है. `setAction` का तरीका, ऑब्जेक्ट को उसके कार्रवाई पैरामीटर के तौर पर लेता है. इस ऑब्जेक्ट में तीन प्रॉपर्टी होनी चाहिए: `id`— सेट की जा रही कार्रवाई का आईडी `text`, वह टेक्स्ट जिसे कार्रवाई के लिए टूलटिप में दिखना चाहिए और `action` वह फ़ंक्शन जो उपयोगकर्ता के कार्रवाई टेक्स्ट पर क्लिक करने पर चलता है. चार्ट के `draw()` तरीके को कॉल करने से पहले, सभी और सभी टूलटिप कार्रवाइयां सेट कर दी जानी चाहिए. ज़्यादा जानकारी. सामान लौटाने का टाइप: `none`
`setSelection()`	चार्ट की दी गई इकाइयों को चुनें. पहले चुने गए को रद्द करता है. इस चार्ट के लिए, एक बार में सिर्फ़ एक इकाई को चुना जा सकता है. `Extended description` . सामान लौटाने का टाइप: कोई नहीं
`clearChart()`	चार्ट साफ़ करता है और अपने सभी आवंटित संसाधन रिलीज़ करता है. सामान लौटाने का टाइप: कोई नहीं

इवेंट

इन इवेंट को इस्तेमाल करने के तरीके के बारे में ज़्यादा जानने के लिए, बुनियादी इंटरैक्शन, इवेंट मैनेज करना, और इवेंट सक्रिय करना देखें.

नाम
`animationfinish`	ट्रांज़िशन ऐनिमेशन पूरा होने पर सक्रिय होता है. प्रॉपर्टी: कोई नहीं
`click`	जब उपयोगकर्ता चार्ट के अंदर क्लिक करता है, तब सक्रिय होता है. इसका इस्तेमाल यह पता लगाने के लिए किया जा सकता है कि शीर्षक, डेटा एलिमेंट, लेजेंड की एंट्री, ऐक्सिस, ग्रिडलाइन या लेबल पर कब क्लिक किया गया है. प्रॉपर्टी: targetID
`error`	जब चार्ट को रेंडर करते समय कोई गड़बड़ी होती है, तब सक्रिय किया जाता है. प्रॉपर्टी: आईडी, मैसेज
`legendpagination`	जब उपयोगकर्ता, लेजेंड वाले पेजों पर क्लिक करते हैं, तो यह टैग सक्रिय होता है. लेजेंड के मौजूदा नंबर पर, पेज के इंडेक्स और पेजों की कुल संख्या को दिखाता है. प्रॉपर्टी: currentPageइंडेक्स, totalPage
`onmouseover`	तब सक्रिय होता है, जब उपयोगकर्ता किसी विज़ुअल इकाई पर माउस ले जाता है. इससे, संबंधित डेटा टेबल एलिमेंट की पंक्ति और कॉलम इंडेक्स पास हो जाते हैं. प्रॉपर्टी: पंक्ति, कॉलम
`onmouseout`	तब सक्रिय होता है, जब उपयोगकर्ता माउस का इस्तेमाल करके, विज़ुअल इकाई से दूर चला जाता है. इससे, इससे जुड़े डेटा टेबल एलिमेंट की लाइन और कॉलम के इंडेक्स पास होते हैं. प्रॉपर्टी: पंक्ति, कॉलम
`ready`	चार्ट, मेथड कॉल के लिए तैयार है. चार्ट बनाने के बाद, अगर आपको चार्ट और इंटरैक्ट करने के तरीकों से इंटरैक्ट करना है, तो `draw` तरीके को कॉल करने से पहले, आपको इस इवेंट के लिए लिसनर सेट अप करना चाहिए. साथ ही, इवेंट चालू होने के बाद ही उन्हें कॉल करना चाहिए. प्रॉपर्टी: कोई नहीं
`select`	तब सक्रिय होता है, जब उपयोगकर्ता किसी विज़ुअल इकाई पर क्लिक करता है. अगर आपको चुना गया है, तो यह जानने के लिए `getSelection()` को कॉल करें. प्रॉपर्टी: कोई नहीं

डेटा नीति

सभी कोड और डेटा को ब्राउज़र में प्रोसेस किया जाता है और रेंडर किया जाता है. किसी भी सर्वर पर डेटा नहीं भेजा जाता.