javascript - Multiple series data on HighCharts column - Stack Overflow

admin管理员组

文章数量:1401431

I'm using HighCharts on a project, and I'm having trouble formatting the data in the way I'd like. I currently have something that works, but it doesn't feel quite right.

What I have is a column chart with everything in one series. I'd rather have each data point be in it's own series & properly labeled in the legend & tooltips. Below are samples of the relevant bits to format the data.

I'm not sure what I'm doing wrong, the changes I've made feel like they should work given their docs & this demo. Also, Do I need the categories if multiple series works?

Working:

"series": [
    {
      "data": [
        {
          "y": 92,
          "name": "Apples: 92ms for 83,481,430 requests",
          "color": "#91cb73"
        },
        {
          "y": 761,
          "name": "Bananas: 761ms for 58,050,877 requests",
          "color": "#ab7053"
        },
        {
          "y": 774,
          "name": "Kiwis: 774ms for 362,294 requests",
          "color": "#44719c"
        }
      ]
   }
]

Demo: /

---

Not working:

 "series": [
    {
      "name": "Apples",
      "data": {
        "y": 92,
        "name": "92ms for 83,481,430 requests",
        "color": "#91cb73"
      }
    },
    {
      "name": "Bananas",
      "data": {
        "y": 761,
        "name": "761ms for 58,050,877 requests",
        "color": "#ab7053"
      }
    },
    {
      "name": "Kiwis",
      "data": {
        "y": 774,
        "name": "774ms for 362,294 requests",
        "color": "#44719c"
      }
    }
]

Demo: /

I'm using HighCharts on a project, and I'm having trouble formatting the data in the way I'd like. I currently have something that works, but it doesn't feel quite right.

What I have is a column chart with everything in one series. I'd rather have each data point be in it's own series & properly labeled in the legend & tooltips. Below are samples of the relevant bits to format the data.

I'm not sure what I'm doing wrong, the changes I've made feel like they should work given their docs & this demo. Also, Do I need the categories if multiple series works?

Working:

"series": [
    {
      "data": [
        {
          "y": 92,
          "name": "Apples: 92ms for 83,481,430 requests",
          "color": "#91cb73"
        },
        {
          "y": 761,
          "name": "Bananas: 761ms for 58,050,877 requests",
          "color": "#ab7053"
        },
        {
          "y": 774,
          "name": "Kiwis: 774ms for 362,294 requests",
          "color": "#44719c"
        }
      ]
   }
]

Demo: http://jsfiddle/b65kp/

---

Not working:

 "series": [
    {
      "name": "Apples",
      "data": {
        "y": 92,
        "name": "92ms for 83,481,430 requests",
        "color": "#91cb73"
      }
    },
    {
      "name": "Bananas",
      "data": {
        "y": 761,
        "name": "761ms for 58,050,877 requests",
        "color": "#ab7053"
      }
    },
    {
      "name": "Kiwis",
      "data": {
        "y": 774,
        "name": "774ms for 362,294 requests",
        "color": "#44719c"
      }
    }
]

Demo: http://jsfiddle/u74Qw/1/

• javascript
• json
• charts
• highcharts

Share Improve this question Follow asked Apr 9, 2014 at 15:12 Chris BarrChris Barr 34.3k2828 gold badges103103 silver badges153153 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

The problem is that "data" expects an array, and you are giving it an object. Wrap each object in an array. For example:

"data": [{
        "y": 92,
        "name": "92ms for 83,481,430 requests",
        "color": "#91cb73"
 }]

Here is your full fix, but it might not give the result you expect, personally I like your first attempt better

FWIW, alternate approach to setting this up:

http://jsfiddle/jlbriggs/zbW4D/

Things to consider:

1) using a legend instead of just directly labeling each bar makes the user do a lot of looking back and forth to see which is which (doing both just adds extra clutter to distract the user)

2) rotating labels always adds more work for the user

3) multiple colors for the bars is not necessary when each bar is labeled appropriately, and again just adds distraction

A horizontal bar chart with no legend and single color for data solves these problems.

本文标签： javascriptMultiple series data on HighCharts columnStack Overflow