Impostare i dati aggiuntivi sulle serie di diagrammi di alte

esiste un modo per passare alcuni dati aggiuntivi all’object della serie che verrà utilizzato per mostrare nella descrizione del grafico?

per esempio

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

qui possiamo usare solo series.name, this.x e this.y per la serie. diciamo che ho bisogno di passare un altro valore dinamico da solo con il set di dati e può accedere tramite object serie. È ansible?

Grazie a tutti in anticipo.

Sì, se si imposta l’object serie come il seguente, dove ogni punto dati è un hash, è ansible passare valori aggiuntivi:

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

Nel tuo tooltip puoi accedervi tramite l’attributo “point” dell’object passato:

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

Esempio completo qui: https://jsfiddle.net/burwelldesigns/jeoL5y7s/

Inoltre, con questa soluzione, puoi persino inserire più dati quanto vuoi :

 tooltip: { formatter: function () { return 'Extra data: ' + this.point.myData + '
Another Data: ' + this.point.myOtherData + ''; } }, 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' }] }]

Grazie, Nick.

Per i dati delle serie temporali, in particolare con un numero sufficiente di punti dati per triggersre la soglia turbo , le soluzioni proposte sopra non funzioneranno. Nel caso della soglia turbo, questo è dovuto al fatto che Highcarts si aspetta che i punti dati siano come una matrice:

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

Per non perdere i vantaggi della soglia turbo (che è importante quando si gestiscono molti punti dati), memorizzo i dati al di fuori del grafico e cerco il punto dati nella funzione formatter del tooltip. Ecco un esempio:

 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]) }] }) 

Questo approccio funzionerà per tutti i tipi di grafici.

Sto usando AJAX per ottenere i miei dati da SQL Server, quindi preparo un array js che viene utilizzato come dati nel mio grafico. Codice JavaScript una volta che AJAX ha avuto successo:

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

Ora per mostrare ulteriori metadati nel tooltip:

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

Io uso un DataRow per scorrere il mio set di risultati, quindi uso una class per assegnare i valori prima di tornare in formato Json. Ecco il codice C # nell'azione controller chiamata da Ajax.

 public JsonResult ChartData(string dataSource, string locationType, string[] locations, string[] methods, string fromDate, string toDate, string[] lstParams) { List> dataResult = new List>(); Dictionary aSeries = new Dictionary(); 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 bSeries = new Dictionary(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(); 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)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; } 

Mi rendo conto che esiste un modo più efficiente e accettabile per codificare in C # ma ho ereditato il progetto.

Solo per aggiungere un po ‘di dinamismo:

Lo ha fatto per generare dati per un istogramma in pila con 10 categorie.
Volevo avere per ogni serie di dati di categoria 4 e volevo visualizzare informazioni aggiuntive (immagine, domanda, distrattore e risposta prevista) per ciascuna serie di dati:

 $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" ); ?> 

Nella sezione highcharts:

 var mydata=; // Tooltip section tooltip: { useHTML: true, formatter: function() { return 'Question ID: '+ this.x +'
'+ 'Question: '+ this.point.ques +'
'+ this.series.name+'
Total attempts: '+ this.y +'
'+ "
"+ 'Distractor: '+ this.point.distractor +'
'+ 'Expected answer: '+ this.point.answer +'
'; } }, // 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.

Spero che aiuti qualcuno.