Question

我有一个柱形图，我试图让它呈现多个类别的多个系列。因为我通过json配置高图我想避免必须将类别设置在一个单独的位置作为数据。我发现如果你将xAxis.type设置为'category'，它将查看类别的系列数据。但是，当我使用多个系列和类别执行此操作时，类别会变得混乱。我如何使这个工作，以便所有类别正确显示？梨是两次，苹果甚至没有出现。

$(function () {
    $('#container').highcharts({
  "title": {
    "text": ""
  },
  "chart": {
    "height": 400
  },
  xAxis: {
    type: 'category'
  },
  "series": [
    {
      "name": "East",
      "type": "column",
      "data": [
        {
          name: 'Apple',
          "y": 98.9
        },
        {
          name: 'Apricot',
          "y": 66.71
        },
        {
          name: 'Cherry',
          "y": 33.77
        },
        {
          name: 'Pear',
          "y": 362.24
        },
        {
          name: 'Orange',
          "y": 48.9
        }
      ],
      "_colorIndex": 0
    },
    {
      "name": "West",
      "type": "column",
      "data": [
        {
          name: 'Peach',
          "y": 348.83
        },
        {
          name: 'Pear',
          "y": 181.78
        },
        {
          name: 'Lemon',
          "y": 760.83
        }
      ],
      "_colorIndex": 1
    }
  ]
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

见fiddler：http://jsfiddle.net/vb8zz9ma/3/

Answer 1

Highcharts lib与不同系列中的类别不匹配，并且不对数据进行排序。使用第二个系列的x索引的示例（第一个可以保持原样）：http://jsfiddle.net/vb8zz9ma/4

示例：

"series": [
  {
    "name": "East",
    "type": "column",
    "data": [
      {
        name: 'Apple',
        "y": 98.9
      },
      {
        name: 'Apricot',
        "y": 66.71
      },
      {
        name: 'Cherry',
        "y": 33.77
      },
      {
        name: 'Pear',
        "y": 362.24
      },
      {
        name: 'Orange',
        "y": 48.9
      }
    ],
    "_colorIndex": 0
  },
  {
    "name": "West",
    "type": "column",
    "data": [
      {
        name: 'Peach',
        "y": 348.83,
        x: 5
      },
      {
        name: 'Pear',
        "y": 181.78,
        x: 3
      },
      {
        name: 'Lemon',
        "y": 760.83,
        x: 6
      }
    ],
    "_colorIndex": 1
  }
]

在highcharts中，如何将显示多个系列和xAxis类型的所有类别设置为类别？

1 个答案: