হাইচার্টস সিরিজে অতিরিক্ত ডেটা সেট করুন

Question

সিরিজ অবজেক্টে কিছু অতিরিক্ত ডেটা পাস করার কোনও উপায় আছে যা 'টুলটিপ' লেখচিত্রটিতে প্রদর্শিত হবে?

উদাহরণ স্বরূপ

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

এখানে আমরা কেবল সিরিজ.নাম, এটি.এক্স এবং এই সিরিজটি ব্যবহার করতে পারি। আসুন বলুন যে আমাকে ডেটা সেট দিয়ে একাই অন্য গতিশীল মানটি পাস করতে হবে এবং সিরিজ অবজেক্টের মাধ্যমে অ্যাক্সেস করতে পারব। এটা কি সম্ভব?

সবাইকে আগাম ধন্যবাদ.

Comments

জাভাস্ক্রিপ্ট আপনি কোন বস্তু বরাবর পাস করবেন সে সম্পর্কে পছন্দসই নয় এবং সাধারণত যদি সেগুলি ব্যবহার না করা হয় তবে সেগুলি এড়িয়ে চলে। এগুলি গ্রন্থাগারের অভ্যন্তরীণ কোড দ্বারা ছিটানো হতে পারে, তবে এগুলি অগত্যা নয় এবং এটি সাধারণত একটি শটের জন্য মূল্যবান। আপনি কি নিজের seriesঅবজেক্টে অতিরিক্ত ডেটা যুক্ত করার চেষ্টা করেছেন এবং এই হ্যান্ডলারে এটি প্রদর্শন করছেন?

— মের্লিন মরগান-গ্রাহাম

@ মের্লিনমর্গান-গ্রাহাম - আমি 'হাইচার্টস'-এ নতুন। আপনি দয়া করে কোনও লিঙ্ক পোস্ট করতে পারেন যা আমি উদাহরণস্বরূপ জিনিসটি খুঁজে পেতে পারি? আমাকে সাহায্য করার জন্য আপনাকে অনেক ধন্যবাদ।

— স্যাম

@ সাম, আমার উত্তরের একটি কার্যকরী উদাহরণ রয়েছে যা আপনি একবার দেখে নিতে পারেন। এটি আপনার প্রয়োজনীয়তাগুলি পুরোপুরি পূরণ না করে থাকলে আমাকে জানান।

— নিক

ডেটা অ্যারে যেমন ডেটা অ্যারে হিসাবে বুদ্বুদ চার্টের ক্ষেত্রে আমি মাইডাটার মতো অতিরিক্ত ডেটা যুক্ত করতে পারি: [[12, 43, 13], [74, 23, 44]] যেমন উপরের মতো ডেটা মানগুলির কী কী? '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

@ অপরিশোধিত পরিবর্তনযোগ্য - হুম, দেখে মনে হচ্ছে অন্যরা এটি সম্পাদনা করেছে এবং জেএসফিডেলে "বেস" সংস্করণ হিসাবে একটি নতুন সংস্করণ সেট করেছে। এটা দুর্ভাগ্যজনক. ফিডল আপডেট করেছে এবং এখন উত্তরের একটি নির্দিষ্ট সংস্করণে লিঙ্ক করছে।

— নিক

@ নিক, দুর্দান্ত, ধন্যবাদ দুর্দান্ত উত্তর, যাইহোক। আমি অব্যবহৃত ডিফল্ট মান চলমান আউট হয়েছিল তথ্য ছিঁচকে চোর।

— undefinedvariable

মাইডাটা যদি এটির হয় তবে কীভাবে অ্যাক্সেস করবেন?

— বিশাল

ধন্যবাদ, ডেটা অ্যারের যেমন ডেটা অ্যারে হিসাবে বুদ্বুদ্বের লেখার ক্ষেত্রে আমি মাইডাটার মতো অতিরিক্ত ডেটা যুক্ত করতে পারি: [[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: তারিখ.পার্স (d.Value), y: d. আইটেম, পদ্ধতি: 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])? এছাড়াও, আপনার লোডাশের দরকার নেই; আপনি অ্যারে.ফাইন্ড ব্যবহার করতে পারেন । এটি IE দ্বারা সমর্থিত নয়, তবে আপনি ইতিমধ্যে ES6 ব্যবহার করছেন ( const) এবং এমএস ২০১ IE সালে আইই সমর্থন করা বন্ধ করে দিয়েছে ।

— ড্যান ড্যাসক্লেস্কু

সঙ্গে ভাল ধরা chartData। আমি লোডাশ ব্যবহার করতে অভ্যস্ত তবে আপনি ঠিক বলেছেন। আমি আমার উদাহরণটি আপডেট করেছি যাতে এটি লাইব্রেরি অজ্ঞাব্য। ধন্যবাদ.

— ক্রিস্টোফ

Answer 4

আমি এসকিউএল সার্ভার থেকে আমার ডেটা পেতে এজ্যাক্স ব্যবহার করছি, তারপরে আমি একটি জেএস অ্যারে প্রস্তুত করি যা আমার চার্টে ডেটা হিসাবে ব্যবহৃত হয়। একবার জাভাস্ক্রিপ্ট কোড একবার এজেএক্স সফল হয়:

...,
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,
},

আমি আমার ফলাফল সেটটি দিয়ে পুনরাবৃত্তি করতে একটি ডাটাআর ব্যবহার করি, তারপরে আমি জেসন ফর্ম্যাটে ফিরে যাওয়ার আগে মানগুলি নির্ধারণের জন্য একটি ক্লাস ব্যবহার করি। অ্যাজাক্স দ্বারা কল করা কন্ট্রোলার অ্যাকশনের জন্য এখানে সি # কোড রয়েছে।

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.

আশা করি এটি কাউকে সাহায্য করবে।