Question

我已经在我的网站上嵌入了一张Highcharts图表。现在，我想使用其他系列数据创建许多其他图表。但是，我希望所有这些其他图表都具有与我的chart1完全相同的样式和相同的类型。在每个图表中，我唯一需要更改的就是字幕和系列名称。我可以轻松地复制我的chart1代码并将其重命名为chart2，chart3等，这可以正常工作。但是，我非常想只复制其他数据系列的chart1，而只更改每个数据系列的字幕和系列名称（CHART1 SUBTITLE和CHART1 SERIESNAME）。

我尝试了不同的解决方案，但到目前为止没有一个有效。下面是我为chart1编写的代码。

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: {
    }
  },
};

下面是我用来初始化chart1中的序列数据的代码。在这里，我添加了一个“ 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/

复制高图类型

1 个答案: