HighCharts列上的多个系列数据

时间:2014-04-09 15:12:24

标签: javascript json charts highcharts

我在项目中使用HighCharts,而且我在按照我喜欢的方式格式化数据时遇到了问题。我目前有一些有用的东西,但它感觉不太合适。

我所拥有的是包含一系列所有内容的柱形图。我宁愿将每个数据点都放在它自己的系列&在图例和标签中正确标注提示。下面是格式化数据的相关位样本。

我不确定自己做错了什么,我所做的改变让他们觉得应该按照docs& this demo。另外,如果多个系列有效,我是否需要这些类别?

工作:

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

演示:http://jsfiddle.net/b65kp/


不工作:

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

演示:http://jsfiddle.net/u74Qw/1/

2 个答案:

答案 0 :(得分:2)

问题是"data"需要一个数组,并且你给它一个对象。将每个对象包装在一个数组中。例如:

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

Here is your full fix,但它可能无法给出您期望的结果,我个人更喜欢您的第一次尝试

答案 1 :(得分:2)

FWIW,setting this up的替代方法:

http://jsfiddle.net/jlbriggs/zbW4D/

需要考虑的事项:

1)使用图例而不是直接标记每个条形图会让用户做很多来回查看哪个是哪个(两者都会增加额外的混乱以分散用户的注意力)

2)旋转标签总是为用户增加更多工作

3)当每个条形图被适当标记时,不需要多个颜色的条形图,并且再次只是增加了分心

没有图例和单一颜色的水平条形图解决了这些问题。