Question

我在php文件中复制某些高级图表时遇到了麻烦。我将自己的.js文件中的每个高图分开。如果我只坚持一个图表，一切正常。一旦我尝试包含几个相同的图表，那么只有第一个图表出现。

下面是第一个highcharts .js文件：

$(function () {
 $('#chart2').highcharts({
chart: {
    zoomType: 'xy',
    marginTop: 40,
    marginBottom: 75
},
title: {
    text: ''
},
subtitle: {
    text: ''
},
xAxis: [{
    categories: []
}],
yAxis: [{ // Primary yAxis
    tickAmount: 11,
    labels: {
        style: {
            color: Highcharts.getOptions().colors[1]
        }
    },
    title: {
        text: '',
        style: {
            color: Highcharts.getOptions().colors[1]
        }
      }
}, { // Secondary yAxis
    gridLineWidth: '0',
    labels: {
        format : '{value}%',
    },
    title: {
        text: '',
        style: {
            color: Highcharts.getOptions().colors[0]
        }
    },

    opposite: true
}],
tooltip: {
    shared: true
},
legend: {
    layout: 'horizontal',
    align: 'center',
    backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
series: [{
    name: '',
    type: 'column',
    yAxis: 0,
    tooltip: {
        valueSuffix: ''
    },

}, {
    name: '',
    type: 'line',
    yAxis: 1,
    tooltip: {
        valueSuffix: '%'
    }
  }]
 }, 

    function(theChart){
     var tableName = '<?php echo $tableName; ?>';
     $.getJSON("Data.php", {id: escape(tableName)}, function(json) {

     theChart.xAxis[0].setCategories(json[0]['data']); 
     theChart.series[0].setData(json[4]['data'], true);
     theChart.series[1].setData(json[3]['data'], true);

    });                               
 });

    var theChart = $('#chart2').highcharts();
    chart = new Highcharts.Chart(options);

 });

下面是第二个highcharts .js文件。请注意，它们完全相同。唯一改变的是变量名（我不知道还能做什么）。正如我之前所说的那样 - 两者的合作都很好。但是当我在我的.php文件中包含两者时，只会显示第一个。

$(function () {
 $('#chart3').highcharts({
chart: {
    zoomType: 'xy',
    marginTop: 40,
    marginBottom: 75
},
title: {
    text: 'EBITDA and EBITDA-margin'
},
subtitle: {
    text: ''
},
xAxis: [{
    categories: []
}],
yAxis: [{ // Primary yAxis
    tickAmount: 11,
    labels: {
        style: {
            color: Highcharts.getOptions().colors[1]
        }
    },
    title: {
        text: '',
        style: {
            color: Highcharts.getOptions().colors[1]
        }
      }
}, { // Secondary yAxis
    gridLineWidth: '0',
    labels: {
        format : '{value}%',
    },
    title: {
        text: '',
        style: {
            color: Highcharts.getOptions().colors[0]
        }
    },

    opposite: true
}],
tooltip: {
    shared: true
},
legend: {
    layout: 'horizontal',
    align: 'center',
    backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
series: [{
    name: '',
    type: 'column',
    yAxis: 0,
    tooltip: {
        valueSuffix: ''
    },

}, {
    name: '',
    type: 'line',
    yAxis: 1,
    tooltip: {
        valueSuffix: '%'
    }
  }]
 }, 

    function(theChart1){
     var tableName1 = '<?php echo $tableName; ?>';
     $.getJSON("Data.php", {id: escape(tableName1)}, function(json) {

     theChart1.xAxis[0].setCategories(json[0]['data']); 
     theChart1.series[0].setData(json[4]['data'], true);
     theChart1.series[1].setData(json[3]['data'], true);

    });                               
 });

    var theChart1 = $('#chart3').highcharts();

 });

您会注意到我将第一张图表称为“chart2”，第二张图表称为“chart3”。我认为问题很奇怪，因为我只在这个确切的图表类型（双轴列+线）上遇到这个问题。我在.php文件中包含文件的方式是在头部使用php include。然后我使用div在身体部分调用它们。

<head>
<script type="text/javascript">
    <?php
         include('../index/charts2.js');
         include('../index/charts3.js');
    ?>
</script>
</head>
<body>
        <table>
        <tr>
            <td>
                <div id="chart2"></div>
            </td>
            <td>
                <div id="chart3"></div>
            </td>
        </tr>
      </table>
</body>

我希望有人能够提供帮助。如果您需要进一步了解此信息，请与我们联系。

Answer 1

我认为这可以帮到你，看一下这个例子http://jsfiddle.net/engemasa/7cvCX/

它取自how do I get two highcharts on one page? （所有信用都发布了它）

no code nesesary, look at the fiddle, its self explanatory.

另外，一旦执行了一切，控制台会显示一些错误吗？

另外，你是否真的知道它只是一个被展示的？，这两个图表是否有可能一个接一个地执行？

在php文件中复制Highchart

1 个答案: