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'
        }]
      });
});

渲染条形图

2 个答案: