highcharts - 渲染条形图

Question

我有以下数据结构：

{
"origin": "category2",
"value": 30,
"key": "name1"
},
{
"origin": "category1",
"value": 18,
"key": "name2"
},
{
"origin": "category2",
"value": 15,
"key": "name3"
},
{
"origin": "category1",
"value": 11,
"key": "name4"
},

现在我正在寻找一种将这些数据绘制为条形图的方法，其中键用作轴的图例，原点用于条形图的颜色和图表图例，所以我有一个带有 4 个条形图的图表2 种不同的颜色和显示category1和的图表图例category2。

我想知道是否有更好的方法让 2 系列看起来像这样：

{name: 'category1', data: [0,18,0,11]}
{name: 'category2', data: [30,0,15,0]}

和类别：

['name1','name2','name3','name4' ]

Answer 1

除了您的解决方案，您还可以使用单一系列并为点定义颜色，例如：

series: [{
        name: 'Year 1800',
        data: [107, 31, {
            y: 635,
            color: 'red'
        }, {
            y: 635,
            color: 'red'
        }]
    }]

http://jsfiddle.net/RBSpe/

Answer 2

其他选项是将每个条形图管理为唯一的，并对每个条形图配置进行更多控制。

Template.body.helpers({
  createChart: function () {
    // Prepare some data: 
      category1= [{
           y: 18,
           name: "category1"
      }],
      category2 = [{
           y: 30,
           name: "category2"
      }],
      category3 = [{
           y: 40,
           name: "category3"
      }], 
      category4 = [{
           y: 5,
           name: "category4"
      }];
    // Use Meteor.defer() to create chart after DOM is ready:
    Meteor.defer(function() {
      // Create standard Highcharts chart with options:
      Highcharts.chart('Charts', {
        chart: {
          renderTo: 'container',
            type: 'column',
        },
        series: [{
          type: 'column',
          margin: 75,
          data: category1,
          name: "category1Name",
          color: '#FF6600'
        }, {
          type: 'column',
          margin: 75,
          data: category2,
          name: "category2Name",
          color: '#FF6600'
        }, {
          type: 'column',
          margin: 75,
          data: category3,
          name: "category3Name",
          color: '#ffff00'
        }, {
          type: 'column',
          margin: 75,
          data: category4,
          name: "category4Name",
          color: '#ffff00'
        }]
      });
});