Репликация типа Highcharts

Question

Я включил диаграмму Highcharts на свой сайт.Теперь я хотел бы создать много дополнительных диаграмм, используя данные других серий.Однако я хотел бы, чтобы все эти дополнительные диаграммы имели одинаковый стиль и были бы того же типа, что и мой график1.Единственное, что мне придется изменить на каждом графике - это название субтитров и серии.Я могу легко скопировать мой код chart1 и переименовать его в chart2, chart3 и т. Д., И это прекрасно работает.Однако я очень хотел бы просто скопировать свою диаграмму1 для других рядов данных, при этом меняя только субтитры и названия рядов для каждого ряда данных (SUBTITLE CHART1 и ИМЯ СЕРИИ CHART1).

Я пробовал разные решения, но пока ни одно не работало.Ниже приведен код, который я сделал для своей диаграммы 1.

chartOptions.chart1 = {
  chart: {
    type: 'column'
  },
  title: {
    text: 'CHARTNAME',
    style: {
      fontFamily: 'Montserrat,serif',
      spacingTop: 30,
      fontSize: '22px'
    }
  },
  subtitle: {
      text: 'CHART1 SUBTITLE',
      align: 'left',
      x: 55,
      style: {
        fontFamily: 'Montserrat,serif',
        spacingTop: 25,
        color: "#000",
        fontSize: '14px'
      }
  },
  xAxis: {
    categories: [],
    labels: {
      rotation: -20,
    }
  },
  yAxis: {
    title: {
      text: 'TITLETEXT',
      rotation: 270,
      y: -30
    },
  },
  series: [{
    name: 'CHART1 SERIESNAME',
    color: '#006699',
    data: []
  }],
  tooltip: {
    }
  },
};

Ниже приведен код, который я использую для инициализации данных серии в диаграмме 1.Здесь я добавил 'chart2' и, по сути, надеялся, что он каким-то образом сможет инициализировать это в 'chart1' и каким-то образом также изменить подзаголовок диаграммы и название серии.

$('chart').ready(function() {
 var tableName = '<?php echo $tableName; ?>'
 $.getJSON("../companychart/chartdataNew.php", {id: escape(tableName)}, function(json) {
        chartOptions.chart1.xAxis.categories = json['XAXIS NAME']['data'];
        chartOptions.chart1.series[0].data = json['SERIES 1']['data'];

        chartOptions.chart2.xAxis.categories = json['XAXIS NAME']['data'];
        chartOptions.chart2.series[0].data = json['SERIES 2']['data'];
 });

Answer 1

Вы можете использовать метод Highcharts.merge, чтобы расширить параметры по умолчанию (используемые на каждом графике) определенными параметрами графика (серия, субтитры).Посмотрите демоверсию, размещенную ниже.

HTML:

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container1"></div>
<div id="container2"></div>
<div id="container3"></div>

JS:

var chart1 = {
    subtitle: {
      text: 'CHART1 SUBTITLE',
    },
    series: [{
      name: 'CHART1 SERIESNAME',
      color: '#006699',
      data: [1, 2, 3, 4, 5]
    }]
  },
  chart2 = {
    subtitle: {
      text: 'CHART2 SUBTITLE',
    },
    series: [{
      name: 'CHART2 SERIESNAME',
      color: '#0034ef',
      data: [5, 1, 2, 6, 2]
    }]
  },
  chart3 = {
    subtitle: {
      text: 'CHART3 SUBTITLE',
    },
    series: [{
      name: 'CHART3 SERIESNAME',
      color: '#23ee45',
      data: [3, 5, 2, 3, 1]
    }]
  },
  chartDefaultOptions;

chartDefaultOptions = {
  chart: {
    type: 'column'
  },
  title: {
    text: 'CHARTNAME',
    style: {
      fontFamily: 'Montserrat,serif',
      spacingTop: 30,
      fontSize: '22px'
    }
  },
  subtitle: {
    align: 'left',
    x: 55,
    style: {
      fontFamily: 'Montserrat,serif',
      spacingTop: 25,
      color: "#000",
      fontSize: '14px'
    }
  },
  xAxis: {
    categories: [],
    labels: {
      rotation: -20,
    }
  },
  yAxis: {
    title: {
      text: 'TITLETEXT',
      rotation: 270,
      y: -30
    },
  }
};

Highcharts.chart('container1', Highcharts.merge(chartDefaultOptions, chart1));
Highcharts.chart('container2', Highcharts.merge(chartDefaultOptions, chart2));
Highcharts.chart('container3', Highcharts.merge(chartDefaultOptions, chart3));

Демо: https://jsfiddle.net/BlackLabel/7utogs95/