问题

The Problem

It would be very convenient when I am passing data into flot if I could pass some supplementary data which I want to access when the plotclick event is triggered.

My Data

Here is some standard data;

[{label: 'first', data: 5, color: '#123'},
{ label: 'first', data: 10, color: '#456'}]

I want to be able to do something like;

[{label: 'first', data: 5, color: '#123', my_custom_attribute: 'some data'},
{ label: 'first', data: 10, color: '#456', my_custom_attribute: 'some more data'}]

So that inside of my plotclick event I could do;

$('chart').bind('plotclick', function(event, pos, item) {
  console.log(item.series.my_custom_attribute) //Or something to that effect
});

What I have tried

I have tried just inserting the above and looking at the returned contents of item inside of my plotclick event, it doesn't appear to store my_custom_attribute anywhere.

I have read through the documentation at https://github.com/flot/flot/blob/master/API.md and couldn't gleam any relevant information.

I have searched google and here for answers and couldn't find one that suited my needs.

Update

Thanks to Khawer Zeshan for providing a solution, this still isn't working for me;

Here is the data I am passing in;

[{breakdown: "test", color: "#00A4D3", data: 1.5, label: "History"},
 {breakdown: "test", color: "#1464F6", data: 0, label: "Geography"}]

But the breakdown attribute doesn't appear in the output for item.

Everything else about the chart appears to work.

回答1:

Try this

If you look up the custom data via the original data variable you used when initializing the chart. the data will still be there. For some reason the data cannot be accessed directly through item ... it seems to get deleted.

var data = [
{ label: "Series1",  data: [[1,1]],  myData: "test 1"},
{ label: "Series2",  data: [[1,1]],  myData: "test 2"},
{ label: "Series3",  data: [[1,1]],  myData: "test 3"},
{ label: "Series4",  data: [[1,1]],  myData: "test 4"},
{ label: "Series5",  data: [[1,1]],  myData: "test 5"},
{ label: "Series6",  data: [[1,5]],  myData: "test 6"}
];


$.plot($("#placeholder"), data, {
    series: {
        pie: { 
            show: true
        }
    },
    grid: {
        hoverable: true,
        clickable: true
    }
});



$("#placeholder").bind("plotclick", function (event, pos, item) {
if (item) { 
       console.log(data[item.seriesIndex]);
    }
});

Hope that helps!

回答2:

You got that right. You can use custom data parameters to your liking

data = [{ data:data1, label:"fixed", lines:{show:true}, my_custom_attribute: 'somedata'}];

Than you can get your custom data as follows

$("#placeholder").bind("plotclick", function (event, pos, item) {
        if (item) { 
            alert(item.series.my_custom_attribute);
        }
    });

FIDDLE

回答3:

console.log(data[item.seriesIndex]);

it works for me...

For the newer version(0.8) the custom variable directly available in series level like

console.log(item.series.my_custom_attribute);

But for lesser version seriesIndex way should work..

Would like to Thanks @Milk Man

来源：https://stackoverflow.com/questions/17809126/adding-custom-attributes-to-flot-data

标签

jquery

flot

Adding custom attributes to flot data

问题