Javascript 在highcharts中拆分显示图例

我有组合图和高度图，有样条线，饼图和堆叠图。是否可以拆分图例或同时使用垂直和水平布局

当前布局图例是水平的

*系列1*系列2*系列3*系列4*系列5*系列6*系列7*系列8

我希望图例显示为

*系列1*系列2
*系列3*系列4*系列5
*系列6*系列7*系列8

可能吗

---

thanx

您可以使用图例的itemWidth属性。这是链接

Highcharts.chart('container', {
chart: {
    width: 500
},

title: {
    text: 'Legend <em>itemWidth</em> option'
},

legend: {
    itemWidth: 100
},

series: [{
    data: [6, 4, 2],
    name: 'First'
}, {
    data: [7, 3, 2],
    name: 'Second'
}, {
    data: [9, 4, 8],
    name: 'Third'
}, {
    data: [1, 2, 6],
    name: 'Fourth'
}, {
    data: [4, 6, 4],
    name: 'Fifth'
}, {
    data: [1, 2, 7],
    name: 'Sixth'
}, {
    data: [4, 2, 5],
    name: 'Seventh'
}, {
    data: [8, 3, 2],
    name: 'Eighth'
}, {
    data: [4, 5, 6],
    name: 'Ninth'
}]

Highcharts.chart（'container'{
图表：{
宽度：500
},
标题：{
文本：“图例项宽度选项”
},
图例：{
项目宽度：100
},
系列：[{
数据：[6,4,2]，
名字：“第一”
}, {
数据：[7,3,2]，
姓名：“第二”
}, {
数据：[9,4,8]，
姓名：“第三”
}, {
数据：[1,2,6]，
姓名：“第四”
}, {
数据：[4,6,4]，
姓名：“第五”
}, {
数据：[1,2,7]，
姓名：“第六”
}, {
数据：[4,2,5]，
姓名：“第七”
}, {
数据：[8,3,2]，
姓名：“第八”
}, {
数据：[4,5,6]，
姓名：“第九”
}]

}))

---

您可以使用图例的itemWidth属性。这是链接

Highcharts.chart('container', {
chart: {
    width: 500
},

title: {
    text: 'Legend <em>itemWidth</em> option'
},

legend: {
    itemWidth: 100
},

series: [{
    data: [6, 4, 2],
    name: 'First'
}, {
    data: [7, 3, 2],
    name: 'Second'
}, {
    data: [9, 4, 8],
    name: 'Third'
}, {
    data: [1, 2, 6],
    name: 'Fourth'
}, {
    data: [4, 6, 4],
    name: 'Fifth'
}, {
    data: [1, 2, 7],
    name: 'Sixth'
}, {
    data: [4, 2, 5],
    name: 'Seventh'
}, {
    data: [8, 3, 2],
    name: 'Eighth'
}, {
    data: [4, 5, 6],
    name: 'Ninth'
}]

Highcharts.chart（'container'{
图表：{
宽度：500
},
标题：{
文本：“图例项宽度选项”
},
图例：{
项目宽度：100
},
系列：[{
数据：[6,4,2]，
名字：“第一”
}, {
数据：[7,3,2]，
姓名：“第二”
}, {
数据：[9,4,8]，
姓名：“第三”
}, {
数据：[1,2,6]，
姓名：“第四”
}, {
数据：[4,6,4]，
姓名：“第五”
}, {
数据：[1,2,7]，
姓名：“第六”
}, {
数据：[4,2,5]，
姓名：“第七”
}, {
数据：[8,3,2]，
姓名：“第八”
}, {
数据：[4,5,6]，
姓名：“第九”
}]

}))

---

仅使用Highcharts构造函数选项无法完成此操作。您可以通过包装一些核心功能来实现这种外观和行为：

(function(H) {
  var merge = H.merge;

  H.wrap(H.Legend.prototype, 'getAllItems', function() {
    var allItems = [],
      chart = this.chart,
      options = this.options,
      legendID = options.legendID;

    H.each(chart.series, function(series) {
      if (series) {
        var seriesOptions = series.options;

        // use points or series for the legend item depending on legendType
        if (!isNaN(legendID) && (seriesOptions.legendID === legendID)) {
          allItems = allItems.concat(
            series.legendItems ||
            (seriesOptions.legendType === 'point' ?
              series.data :
              series)
          );
        }
      }
    });

    return allItems;
  });

  H.wrap(H.Chart.prototype, 'render', function(p) {
    var chart = this,
      chartOptions = chart.options;

    chart.firstLegend = new H.Legend(chart, merge(chartOptions.legend, chartOptions.firstLegend, {
      legendID: 0
    }));

    chart.secondLegend = new H.Legend(chart, merge(chartOptions.legend, chartOptions.secondLegend, {
      legendID: 1
    }));

    p.call(this);
  });

  H.wrap(H.Chart.prototype, 'redraw', function(p, r, a) {
    var chart = this;

    p.call(chart, r, a);

    chart.firstLegend.render();
    chart.secondLegend.render();
  });

  H.wrap(H.Legend.prototype, 'positionItem', function(p, item) {
    p.call(this, item);
  });
})(Highcharts);

海图选项：

Highcharts.chart('container', {

  chart: {
    marginRight: 350 // create some space for the legend
  },

  legend: {
    verticalAlign: 'middle',
    width: 300,
    align: 'right'
  },
  firstLegend: {
    y: -25
  },
  secondLegend: {
    y: 25
  },

  series: [{
    data: [5, 6, 7],
    legendID: 0,
  }, {
    data: [2, 3, 1],
    legendID: 0,
  },
  (...)
  {
    data: [1, 8, 2],
    legendID: 1
  }, {
    data: [3, 2],
    legendID: 1
  },
  (...)
  ]
});

现场演示：

---

可以优化此代码，使其适用于2个以上的图例。

仅使用Highcharts构造函数选项无法完成此操作。您可以通过包装一些核心功能来实现这种外观和行为：

(function(H) {
  var merge = H.merge;

  H.wrap(H.Legend.prototype, 'getAllItems', function() {
    var allItems = [],
      chart = this.chart,
      options = this.options,
      legendID = options.legendID;

    H.each(chart.series, function(series) {
      if (series) {
        var seriesOptions = series.options;

        // use points or series for the legend item depending on legendType
        if (!isNaN(legendID) && (seriesOptions.legendID === legendID)) {
          allItems = allItems.concat(
            series.legendItems ||
            (seriesOptions.legendType === 'point' ?
              series.data :
              series)
          );
        }
      }
    });

    return allItems;
  });

  H.wrap(H.Chart.prototype, 'render', function(p) {
    var chart = this,
      chartOptions = chart.options;

    chart.firstLegend = new H.Legend(chart, merge(chartOptions.legend, chartOptions.firstLegend, {
      legendID: 0
    }));

    chart.secondLegend = new H.Legend(chart, merge(chartOptions.legend, chartOptions.secondLegend, {
      legendID: 1
    }));

    p.call(this);
  });

  H.wrap(H.Chart.prototype, 'redraw', function(p, r, a) {
    var chart = this;

    p.call(chart, r, a);

    chart.firstLegend.render();
    chart.secondLegend.render();
  });

  H.wrap(H.Legend.prototype, 'positionItem', function(p, item) {
    p.call(this, item);
  });
})(Highcharts);

海图选项：

Highcharts.chart('container', {

  chart: {
    marginRight: 350 // create some space for the legend
  },

  legend: {
    verticalAlign: 'middle',
    width: 300,
    align: 'right'
  },
  firstLegend: {
    y: -25
  },
  secondLegend: {
    y: 25
  },

  series: [{
    data: [5, 6, 7],
    legendID: 0,
  }, {
    data: [2, 3, 1],
    legendID: 0,
  },
  (...)
  {
    data: [1, 8, 2],
    legendID: 1
  }, {
    data: [3, 2],
    legendID: 1
  },
  (...)
  ]
});

现场演示：

---

此代码可以进行优化，使其适用于2个以上的图例。

如果一行中的第一个和第二个图例中断，第二行中的第三个图例中断，第二行中的第四个图例中断（在第一行和第二行下方），然后在第三行中中断第六个图例中断（在第六个图例中断）。有可能吗？嗯，我做了一个快速搜索，但找不到一个可以为特定系列指定图例宽度的代码。是的..我在这里问的原因，也许有人知道，顺便说一句..thanx非常感谢你的帮助如果第一行和第二行中的第一个和第二个然后断开，第二行中的第三四个第五个（在第一行和第二行下面），然后在第三排（低于第六七八排）打破第六七八九。有可能吗？嗯，我做了一个快速搜索，但找不到一个可以为特定系列指定图例宽度的代码。是的..这就是我在这里问的原因，也许有人知道，顺便说一句..thanx非常感谢你的帮助我不认为那是可能的看我不认为那是可能的看