highcharts 多个图表-提高性能

gcmastyq  于 2022-12-29  发布在  Highcharts
关注(0)|答案(1)|浏览(196)

我的要求是显示多个具有公共x轴的图表。并且只为最后显示的图表启用x轴标签(因为它们是公共的)。
在小提琴https://jsfiddle.net/1dhLut64/中,我的代码在开始时创建了四个图表,即使只选择了一个图表(您可以看到updateCharts方法被调用了四次)。我如何在第一次创建一个图表时,仅当它是可见的。即只有当我单击chart2复选框时,才应该创建chart2。这样我相信性能可以提高。谢谢。
更新方法如下:

// calls other functions, including updatecharts
setTimeout(chartLoaded, 0); 

// To have xAxis label enabled for the last chart selected.
function updateCharts() {
  console.log("updatecharts called")
  const selected = Highcharts.charts.map(chart => 
  document.querySelector(`#checkbox${chart.options.id}`).checked);

  const checkedCheckboxes = selected.filter(x => x).length; // counts true values in selected
  const lastSelected = selected.lastIndexOf(true); // the last index of true
  Highcharts.charts.forEach(function(chart, i) {
    chart.update({
      chart: {
        height: height / checkedCheckboxes
      },
      xAxis: {
        labels: {
          enabled: i === lastSelected
        }
      }
    });
  });
}
qxsslcnc

qxsslcnc1#

例如,您可以将所有必需的图表信息存储在一个数组中:

const chartsInfo = [{
  container: 'chart1',
  title: 'NorthAmerica1',
  data: data
}, ...];

仅在开始处创建第一个图表,然后选择创建下一个图表(如果不存在):

document.querySelectorAll('#checkboxes input').forEach(function(checkbox, index) {
    checkbox.addEventListener('change', (e) => {

      const id = e.target.dataset.id,
        checked = e.target.checked,
        node = document.querySelector(`#chart${id}`);

      if (!charts[index]) {
        const newChart = new Chart(
          chartsInfo[index].container,
          index + 1,
          chartsInfo[index].title,
          chartsInfo[index].data
        );
        charts[index] = newChart.create();
      }

      if (checked) {
        node.style.display = 'block';
      } else {
        node.style.display = 'none';
      }
      updateCharts();
    });
  });

实时演示:https://jsfiddle.net/BlackLabel/xuf6293k/
**API参考:**api.highcharts.com/class-reference/Highcharts.Chart#Chart

相关问题