追加データをハイチャートシリーズに設定


116

チャートの「ツールチップ」に表示するために使用する系列オブジェクトに追加のデータを渡す方法はありますか?

例えば

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

ここでは、series.name、this.x&this.yのみをシリーズに使用できます。データセットとともに別の動的な値のみを渡す必要があり、系列オブジェクトを介してアクセスできるとしましょう。これは可能ですか?

よろしくお願いします。


1
JavaScriptは、どのオブジェクトを渡すかについて選り好みしないため、通常、使用されないオブジェクトは無視します。これらはライブラリの内部コードによって削除される可能性がありますが、必ずしもそうである必要はなく、通常は一見の価値があります。seriesオブジェクトに追加のデータを追加して、このハンドラーに表示してみましたか?
Merlyn Morgan-Graham

@ MerlynMorgan-Graham-「HighCharts」は初めてです。例のようなものを見つけることができるリンクを投稿していただけますか?助けてくれて本当にありがとう
サム

@サム、私の答えには、あなたが見て取ることができる完全に機能する例があります。要件を十分に満たしていない場合はお知らせください。
Nick

データ配列がdata:[[12、43、13]、[74、23、44]]のように、バブルチャートの場合にmyDataのような追加データをどのように追加できますか。たとえば、上記のようなデータ値のキーは何ですか。 「y」がありますが、「x」、「y」、「z」はありますか?または「サイズ」
vishal

回答:


220

はい、次のようにシリーズオブジェクトを設定した場合、各データポイントはハッシュであり、追加の値を渡すことができます。

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/


1
これは古い答えですが、フィドルリンクは関連する例を示していません。
未定義変数

@undefinedvariable-うーん、他の人がこれを編集し、jsfiddleの「ベース」バージョンとして新しいバージョンを設定したようです。それは残念です。フィドルを更新し、回答の特定のバージョンにリンクするようになりました。
Nick

@ニック、素晴らしい、ありがとう。ところで、正解です。私は、内の情報をこっそり未使用のデフォルト値が不足していた。
undefinedvariable

配列の場合にmyDataにアクセスするにはどうすればよいですか?
vishal 2013年

2
おかげで、データ配列がデータのようにバブルチャートの場合にmyDataのような追加のデータを追加するにはどうすればよいですか:[[12、43、13]、[74、23、44]]たとえば、上記には「y」がありますが、「x」、「y」、「z」はありますか?または「サイズ」?
vishal 2013年

17

さらに、このソリューションでは、複数のデータを必要なだけ配置することもできます

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

ニックさん、ありがとうございます。


4
[追加データ]は、[x、y]非オブジェクト形式が使用されている場合は不可能ですか?datetimex値として持っていますが、ツールチップにデータを追加したいと思います。
Rvanlaak

timeseriesデータの例:var serie = {x:Date.parse(d.Value)、y:d.Item、method:d.method};
Arjun Upadhyay 2017年

15

時系列データの場合、特にターボしきい値をアクティブにするのに十分なデータポイントがある場合、上記の提案されたソリューションは機能しません。ターボしきい値の場合、これはHighcartsがデータポイントが次のような配列であると想定しているためです。

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

このアプローチは、すべての種類のグラフで機能します。


答えてくれてありがとう。HighStockグラフに追加データを表示するのにとても役立ちます。
S Kumar

1
すべきではdata: _.map(data, row => [row['timestamp'], row['value']])ないdata: chartData.map(row => [row.timestamp, row.value])?また、lodashは必要ありません。Array.findを使用できます。IEではサポートされていませんが、ES6をすでに使用しており(2016年const)、MSはIEのサポートを終了しました
Dan Dascalescu 2018

との良いキャッチchartData。私はロダッシュを使うことに慣れていますが、あなたは正しいです。ライブラリにとらわれないようにサンプルを更新しました。どうも。
クリストフ

3

SQL Serverからデータを取得するためにAJAXを使用しています。次に、チャートのデータとして使用されるjs配列を準備します。AJAXが成功した後のJavaScriptコード:

...,
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形式で返します。Ajaxによって呼び出されるコントローラーアクションの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;
}

C#でコーディングするためのより効率的で許容できる方法があることに気づきましたが、私はプロジェクトを継承しました。


1

ある種のダイナミズムを追加するだけです:

これは、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.

それが誰かを助けることを願っています。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.