अतिरिक्त डेटा को हाईचर्स श्रृंखला पर सेट करें

Question

क्या सीरीज़ ऑब्जेक्ट में कुछ अतिरिक्त डेटा पास करने का कोई तरीका है जो चार्ट 'टूलटिप' में दिखाने के लिए उपयोग करेगा?

उदाहरण के लिए

 tooltip: {
     formatter: function() {
               return '<b>'+ this.series.name +'</b><br/>'+
           Highcharts.dateFormat('%b %e', this.x) +': '+ this.y;
     }

यहाँ हम केवल Series.name, this.x और इस श्रृंखला का उपयोग कर सकते हैं। मान लें कि मुझे डेटा सेट के साथ एक और गतिशील मूल्य पास करने की आवश्यकता है और श्रृंखला ऑब्जेक्ट के माध्यम से एक्सेस कर सकते हैं। क्या यह संभव है?

एडवांस में आप सभी को धन्यवाद।

Comments

जावास्क्रिप्ट उन वस्तुओं के बारे में नहीं है जिनके साथ आप गुजरते हैं, और आमतौर पर उनकी उपेक्षा करते हैं यदि उनका उपयोग नहीं किया जाता है। उन्हें लाइब्रेरी के आंतरिक कोड द्वारा छीन लिया जा सकता है, लेकिन वे जरूरी नहीं हैं, और यह आमतौर पर एक शॉट के लायक है। क्या आपने अपनी seriesवस्तु में अतिरिक्त डेटा को जोड़ने और इस हैंडलर में प्रदर्शित करने की कोशिश की है ?

— मेरलिन मॉर्गन-ग्राहम

@ मेरलिनमर्गन-ग्राहम - मैं 'हाईचर्स' के लिए नया हूं। क्या आप किसी भी लिंक को पोस्ट कर सकते हैं जिसे मैं उदाहरण की तरह पा सकता हूं? मेरी मदद करने के लिए बहुत-बहुत धन्यवाद।

— सैम

@ नमस्कार, मेरे जवाब में एक पूर्ण कार्य उदाहरण है जिसे आप देख सकते हैं। मुझे बताएं कि क्या यह आपकी आवश्यकताओं को पूरा नहीं करता है।

— निक

मैं बबल चार्ट के मामले में मायडेटा जैसे अतिरिक्त डेटा कैसे जोड़ सकता हूं क्योंकि डेटा सरणी डेटा की तरह है: [[१२, ४३, १३], [data४, २३, ४४]] जैसे डेटा मान के लिए कुंजी क्या हैं 'y' हैं, क्या 'x', 'y' और 'z' हैं? या 'आकार'

— विस्सल

Answer 1

हां, यदि आप निम्नलिखित की तरह श्रृंखला ऑब्जेक्ट सेट करते हैं, जहां प्रत्येक डेटा बिंदु एक हैश है, तो आप अतिरिक्त मान पास कर सकते हैं:

new Highcharts.Chart( {
    ...,
    series: [ {
        name: 'Foo',
        data: [
            {
                y : 3,
                myData : 'firstPoint'
            },
            {
                y : 7,
                myData : 'secondPoint'
            },
            {
                y : 1,
                myData : 'thirdPoint'
            }
        ]
    } ]
} );

अपने टूलटिप में आप इसे पास किए गए ऑब्जेक्ट के "बिंदु" विशेषता के माध्यम से एक्सेस कर सकते हैं:

tooltip: {
    formatter: function() {
        return 'Extra data: <b>' + this.point.myData + '</b>';
    }
}

यहां पूरा उदाहरण: https://jsfiddle.net/burwelldesigns/jeoL5y7s/

Comments

मुझे पता है कि यह एक पुराना उत्तर है, लेकिन फिडल लिंक अब प्रासंगिक उदाहरण नहीं दिखाता है।

— अपरिभाषित

@undefinedvariable - hmm, ऐसा लगता है कि अन्य लोगों ने इसे संपादित किया है और jsfiddle में "आधार" संस्करण के रूप में एक नया संस्करण सेट किया है। बदकिस्मती से। उत्तर में एक विशिष्ट संस्करण के लिए फ़िडेल और अब लिंक करना अपडेट किया गया।

— निक

@ निक, भयानक, धन्यवाद। शानदार जवाब, वैसे। मैं जानकारी को चुपके करने के लिए अप्रयुक्त डिफ़ॉल्ट मानों से बाहर चल रहा था।

— अपरिभाषित

अगर एक सरणी है तो myData तक कैसे पहुँचें?

— vishal

धन्यवाद, मैं बबल चार्ट के मामले में myData जैसे अतिरिक्त डेटा कैसे जोड़ सकता हूं क्योंकि डेटा सरणी डेटा की तरह है: [[12, 43, 13], [74, 23, 44]] जैसे डेटा मानों के लिए कुंजी क्या हैं ऊपर 'y' है, क्या 'x', 'y' और 'z' हैं? या 'आकार'?

— विशाल

Answer 2

इसके अतिरिक्त, इस समाधान के साथ, आप जितना चाहें उतना डेटा डाल सकते हैं :

tooltip: {
    formatter: function () {
        return 'Extra data: <b>' + this.point.myData + '</b><br> Another Data: <b>' + this.point.myOtherData + '</b>';
    }
},

series: [{
    name: 'Foo',
    data: [{
        y: 3,
        myData: 'firstPoint',
        myOtherData: 'Other first data'
    }, {
        y: 7,
        myData: 'secondPoint',
        myOtherData: 'Other second data'
    }, {
        y: 1,
        myData: 'thirdPoint',
        myOtherData: 'Other third data'
    }]
}]

थैंक यू निक।

Comments

[X, y] गैर-ऑब्जेक्ट प्रारूप का उपयोग करने पर 'अतिरिक्त डेटा' संभव नहीं है? हमारे पास datetimeएक्स-मान है, लेकिन टूलटिप में अतिरिक्त डेटा जोड़ना चाहते हैं।

— रवनलाक

उदाहरण डेटा के लिए उदाहरण: var serie = {x: Date.parse (d.Value), y: d.Item, विधि: d.method};

— अर्जुन उपाध्याय

Answer 3

समय श्रृंखला डेटा के लिए, विशेष रूप से टर्बो थ्रेशोल्ड को सक्रिय करने के लिए पर्याप्त डेटा बिंदुओं के साथ , ऊपर प्रस्तावित समाधान काम नहीं करेगा। टर्बो थ्रेशोल्ड के मामले में, ऐसा इसलिए है क्योंकि हाईकार्ट को उम्मीद है कि डेटा पॉइंट्स एक सरणी की तरह होंगे:

series: [{
    name: 'Numbers over the course of time',
    data: [
      [1515059819853, 1],
      [1515059838069, 2],
      [1515059838080, 3],
      // you get the idea
    ]
  }]

टर्बो थ्रेशोल्ड के लाभों को न खोने के लिए (जो बहुत सारे डेटा बिंदुओं के साथ काम करते समय महत्वपूर्ण है), मैं चार्ट के बाहर डेटा संग्रहीत करता हूं और टूलटिप formatterफ़ंक्शन में डेटा बिंदु को देखता हूं । यहाँ एक उदाहरण है:

const chartData = [
  { timestamp: 1515059819853, value: 1, somethingElse: 'foo'},
  { timestamp: 1515059838069, value: 2, somethingElse: 'bar'},
  { timestamp: 1515059838080, value: 3, somethingElse: 'baz'},
  // you get the idea
]

const Chart = Highcharts.stockChart(myChart, {
  // ...options
  tooltip: {
    formatter () {
      // this.point.x is the timestamp in my original chartData array
      const pointData = chartData.find(row => row.timestamp === this.point.x)
      console.log(pointData.somethingElse)
    }
  },
  series: [{
      name: 'Numbers over the course of time',
      // restructure the data as an array as Highcharts expects it
      // array index 0 is the x value, index 1 is the y value in the chart
      data: chartData.map(row => [row.timestamp, row.value])
    }]
})

यह दृष्टिकोण सभी चार्ट प्रकारों के लिए काम करेगा।

Comments

धन्यवाद, उत्तर के लिए, यह उच्च स्टॉक ग्राफ़ में अतिरिक्त डेटा प्रदर्शित करने के लिए वास्तव में सहायक है।

— एस कुमार

नहीं data: _.map(data, row => [row['timestamp'], row['value']])होना चाहिए data: chartData.map(row => [row.timestamp, row.value])? इसके अलावा, आपको लॉश की जरूरत नहीं है; आप Array.find का उपयोग कर सकते हैं । यह IE द्वारा समर्थित नहीं है, लेकिन आप पहले से ही ES6 का उपयोग कर रहे हैं ( const) और एमएस ने 2016 में IE का समर्थन करना बंद कर दिया ।

— डैन डेस्केल्सस्कु

के साथ अच्छी पकड़ chartData। मुझे लताड़ का उपयोग करने की आदत है लेकिन आप सही हैं। मैंने अपने उदाहरण को अपडेट किया तो यह पुस्तकालय अज्ञेय है। धन्यवाद।

— क्रिस्टोफ

Answer 4

मैं SQL सर्वर से अपना डेटा प्राप्त करने के लिए AJAX का उपयोग कर रहा हूं, फिर मैं एक js सरणी तैयार करता हूं जिसका उपयोग मेरे चार्ट में डेटा के रूप में किया जाता है। AJAX के सफल होने के बाद जावास्क्रिप्ट कोड:

...,
success: function (data) {
            var fseries = [];
            var series = [];
            for (var arr in data) {
                for (var i in data[arr]['data'] ){
                    var d = data[arr]['data'][i];
                    //if (i < 5) alert("d.method = " + d.method);
                    var serie = {x:Date.parse(d.Value), y:d.Item, method:d.method };
                    series.push(serie);
                }
                fseries.push({name: data[arr]['name'], data: series, location: data[arr]['location']});
                series = [];
            };
            DrawChart(fseries);
         },

अब टूलटिप में अतिरिक्त मेटा-डेटा दिखाने के लिए:

...
tooltip: {
    xDateFormat: '%m/%d/%y',
    headerFormat: '<b>{series.name}</b><br>',
    pointFormat: 'Method: {point.method}<br>Date: {point.x:%m/%d/%y } <br>Reading: {point.y:,.2f}',
    shared: false,
},

मैं अपने रिजल्ट सेट के माध्यम से पुनरावृति करने के लिए एक DataRow का उपयोग करता हूं, फिर मैं Json प्रारूप में वापस पास होने से पहले मान निर्दिष्ट करने के लिए एक वर्ग का उपयोग करता हूं। यहाँ अजाक्स द्वारा नियंत्रित नियंत्रक क्रिया में C # कोड है।

public JsonResult ChartData(string dataSource, string locationType, string[] locations, string[] methods, string fromDate, string toDate, string[] lstParams)
{
    List<Dictionary<string, object>> dataResult = new List<Dictionary<string, object>>();
    Dictionary<string, object> aSeries = new Dictionary<string, object>();
    string currParam = string.Empty;        

    lstParams = (lstParams == null) ? new string[1] : lstParams;
    foreach (DataRow dr in GetChartData(dataSource, locationType, locations, methods, fromDate, toDate, lstParams).Rows)
    {
        if (currParam != dr[1].ToString())
        {
            if (!String.IsNullOrEmpty(currParam))       //A new Standard Parameter is read and add to dataResult. Skips first record.
            {
                Dictionary<string, object> bSeries = new Dictionary<string, object>(aSeries); //Required else when clearing out aSeries, dataResult values are also cleared
                dataResult.Add(bSeries);
                aSeries.Clear();
            }
            currParam = dr[1].ToString(); 
            aSeries["name"] = cParam;
            aSeries["data"] = new List<ChartDataModel>();
            aSeries["location"] = dr[0].ToString();
        }

        ChartDataModel lst = new ChartDataModel();
        lst.Value = Convert.ToDateTime(dr[3]).ToShortDateString();
        lst.Item = Convert.ToDouble(dr[2]);
        lst.method = dr[4].ToString();
        ((List<ChartDataModel>)aSeries["data"]).Add(lst);
    }
    dataResult.Add(aSeries);
    var result = Json(dataResult.ToList(), JsonRequestBehavior.AllowGet);  //used to debug final dataResult before returning to AJAX call.
    return result;
}

मुझे लगता है कि सी # में कोड करने के लिए एक अधिक कुशल और स्वीकार्य तरीका है, लेकिन मुझे परियोजना विरासत में मिली है।

Answer 5

बस किसी प्रकार की गतिशीलता को जोड़ने के लिए:

ऐसा 10 श्रेणियों वाले स्टैक्ड कॉलम चार्ट के लिए डेटा जनरेट करने के लिए किया।
मैं प्रत्येक श्रेणी 4 डेटा श्रृंखला के लिए होना चाहता था और डेटा श्रृंखला में से प्रत्येक के लिए अतिरिक्त जानकारी (छवि, प्रश्न, व्याकुलता और अपेक्षित उत्तर) प्रदर्शित करना चाहता था:

<?php 

while($n<=10)
{
    $data1[]=array(
        "y"=>$nber1,
        "img"=>$image1,
        "ques"=>$ques,
        "distractor"=>$distractor1,
        "answer"=>$ans
    );
    $data2[]=array(
        "y"=>$nber2,
        "img"=>$image2,
        "ques"=>$ques,
        "distractor"=>$distractor2,
        "answer"=>$ans
    );
    $data3[]=array(
        "y"=>$nber3,
        "img"=>$image3,
        "ques"=>$ques,
        "distractor"=>$distractor3,
        "answer"=>$ans
    );
    $data4[]=array(
        "y"=>$nber4,
        "img"=>$image4,
        "ques"=>$ques,
        "distractor"=>$distractor4,
        "answer"=>$ans
    );
}

// Then convert the data into data series:

$mydata[]=array(
    "name"=>"Distractor #1",
    "data"=>$data1,
    "stack"=>"Distractor #1"
);
$mydata[]=array(
    "name"=>"Distractor #2",
    "data"=>$data2,
    "stack"=>"Distractor #2"
);
$mydata[]=array(
    "name"=>"Distractor #3",
    "data"=>$data3,
    "stack"=>"Distractor #3"
);
$mydata[]=array(
    "name"=>"Distractor #4",
    "data"=>$data4,
    "stack"=>"Distractor #4"
);
?>

उच्चकों के खंड में:

var mydata=<? echo json_encode($mydata)?>;

// Tooltip section
tooltip: {
    useHTML: true,
        formatter: function() {

            return 'Question ID: <b>'+ this.x +'</b><br/>'+
                   'Question: <b>'+ this.point.ques +'</b><br/>'+
                   this.series.name+'<br> Total attempts: '+ this.y +'<br/>'+
                   "<img src=\"images/"+ this.point.img +"\" width=\"100px\" height=\"50px\"/><br>"+
                   'Distractor: <b>'+ this.point.distractor +'</b><br/>'+
                   'Expected answer: <b>'+ this.point.answer +'</b><br/>';
               }
           },

// Series section of the highcharts 
series: mydata
// For the category section, just prepare an array of elements and assign to the category variable as the way I did it on series.

आशा है कि यह किसी की मदद करता है।