Fatal编程技术网
  • javascript/
  • Javascript 在php文件中复制Highchart

Javascript 在php文件中复制Highchart

javascript php highcharts

Javascript 在php文件中复制Highchart,javascript,php,highcharts,Javascript,Php,Highcharts,我在复制php文件中的一些高位图表时遇到问题。我将每个highchart分别放在自己的.js文件中。如果我只看一张图表，一切都正常。只要我尝试包含几个相同的图表，那么只有第一个出现 下面是第一个highcharts.js文件： $(function () { $('#chart2').highcharts({ chart: { zoomType: 'xy', marginTop: 40, marginBottom: 75 }, title: { text: ''

我在复制php文件中的一些高位图表时遇到问题。我将每个highchart分别放在自己的.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文件中包含文件的方式是使用PHPClude in head part。然后我使用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>
我希望这里有人能帮忙。如果您需要进一步了解，请告诉我。

我认为这可以帮助您，请看这个示例

它是从这里拿走的 所有的功劳都归功于张贴它的人

no code nesesary, look at the fiddle, its self explanatory.
而且，一旦执行所有操作，控制台会显示一些错误吗

另外，您是舒尔公司的唯一一位吗？两张图表是否有可能一张接一张地执行？

您好，谢谢您的回答。我已经看到了您的JSFIDLE示例，但我认为问题出在我的.js文件中。请记住，我已经有许多相同的海图显示。我在我的问题中添加了一些额外的代码，以显示如何在.php文件中调用它们-请检查您是否有时间。我认为问题要么出在两个.js文件中，要么出在我用来获取JSON数据的Data.php文件中。提前谢谢！我刚刚解决了这个问题！！！！在.js文件的底部，我有：chart=newhighcharts.Chartoptions；-我试图删除这个不知道它做了什么反正一切突然工作！！！巨大的成功。