Question

我正在使用图表，需要并排放置两个堆叠的条形图并共享常用的下载设置。他们在高图中有什么解决方案吗？任何示例将不胜感激。谢谢

Answer 1

可以通过向getSVG方法中添加自定义逻辑来在一个文档中下载多个图表来实现。要创建一个共享的图例，只需使用Hicharts API来控制系列的可见性。查看下面发布的演示和代码。

代码：

/**
 * Create a global getSVG method that takes an array of charts as an
 * argument
 */
Highcharts.getSVG = function(charts) {
  let svgArr = [],
    top = 0,
    width = 0;

  Highcharts.each(charts, function(chart) {
    let svg = chart.getSVG(),
      // Get width/height of SVG for export
      svgWidth = +svg.match(
        /^<svg[^>]*width\s*=\s*\"?(\d+)\"?[^>]*>/
      )[1],
      svgHeight = +svg.match(
        /^<svg[^>]*height\s*=\s*\"?(\d+)\"?[^>]*>/
      )[1];

    svg = svg.replace(
      '<svg',
      '<g transform="translate('+width+', 0 )" '
    );
    svg = svg.replace('</svg>', '</g>');

    width += svgWidth;
		top = Math.max(top, svgHeight);
	
    svgArr.push(svg);
  });

  return '<svg height="' + top + '" width="' + width +
    '" version="1.1" xmlns="http://www.w3.org/2000/svg">' +
    svgArr.join('') + '</svg>';
};

/**
 * Create a global exportCharts method that takes an array of charts as an
 * argument, and exporting options as the second argument
 */
Highcharts.exportCharts = function(charts, options) {

  // Merge the options
  options = Highcharts.merge(Highcharts.getOptions().exporting, options);

  // Post to export server
  Highcharts.post(options.url, {
    filename: options.filename || 'chart',
    type: options.type,
    width: options.width,
    svg: Highcharts.getSVG(charts)
  });
};

const chart1 = Highcharts.chart('container1', {
  legend: {
    enabled: false
  },
  title: {
    text: ''
  },
  exporting: {
  	enabled: false
  },
  credits: {
    enabled: false
  },
  series: [{
    id: 'series1',
    data: [
      439,
      525,
      571,
      696,
      970,
      119,
      137,
      154
    ]
  }, {
    id: 'series2',
    data: [
      234,
      123,
      444,
      322,
      543,
      657
    ]
  }],
});

const chart2 = Highcharts.chart('container2', {
  legend: {
    enabled: false
  },
  exporting: {
  	enabled: false
  },
  title: {
    text: ''
  },
  credits: {
    enabled: false
  },
  series: [{
    id: 'series1',
    data: [
      139,
      225,
      271,
      196,
      770,
      219,
      537,
      254
    ]
  }, {
    id: 'series2',
    data: [
      214,
      223,
      484,
      122,
      443,
      957
    ]
  }],
});

$('.jsLegendItem').on('click', function(e) {
  const btn = $(this),
    seriesId = this.dataset.name;

  if (!btn.hasClass('legend__item--disabled')) {
    btn.addClass('legend__item--disabled')
  } else {
    btn.removeClass('legend__item--disabled')
  }

  Highcharts.charts.forEach(chart => {
    let series = chart.get(seriesId);

    if (series.visible) {
      series.hide();
    } else {
      series.show();
    }
  });
});

$('#btn').on('click', function() {
	Highcharts.exportCharts([chart1, chart2]);
});

#container {
  margin-bottom: 30px;
}

#container1 {
  width: 48%;
  float: left;
}

#container2 {
  width: 48%;
}

.legend {
  display: flex;
  justify-content: center;
}

.legend__item {
  padding: 5px;
  display: inline-block;
  margin-right: 10px;
  cursor: pointer;
}

.legend__dot {
  display: inline-block;
  border-radius: 50%;
  width: 12px;
  height: 12px;
  margin-right: 5px;
}

.legend__dot--black {
  background-color: black;
}

.legend__dot--blue {
  background-color: #7BB5EC;
}

.legend__item--disabled .legend__dot {
  background-color: #ccc;
}

.legend__item--disabled .legend__caption {
  color: #ccc;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container">
  <div id="container1"></div>
  <div id="container2"></div>
</div>

<div class="legend">
  <div class="legend__item jsLegendItem" data-name="series1">
    <span class="legend__dot legend__dot--blue"></span>
    <span class="legend__caption">Series 1</span>
  </div>
  <div class="legend__item jsLegendItem" data-name="series2">
    <span class="legend__dot legend__dot--black"></span>
    <span class="legend__caption">Series 2</span>
  </div>
</div>

<button id="btn">Download</button>

演示：

https://jsfiddle.net/BlackLabel/czwut6n5/

API参考：

需要并排放置两个堆栈图，共享单个配置设置

1 个答案: