Question

我有一个.tpl文件，我想添加几个图表。这些值将从MySQL数据库中获取。对于图表，我使用的是Highcharts。

这是我希望我的图表看起来完全像它的小提琴，当然价值会发生变化。

http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/column-basic/

所以我的代码是：

<head>
    <script src="http://code.highcharts.com/highcharts.js"></script>
    <script src="http://code.highcharts.com/modules/exporting.js"></script>
</head>
<body>
    <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<script type="text/javascript">
    $(function () {
            $('#container').highcharts({
                chart: {
                    type: 'column'
                },
                title: {
                    text: 'Monthly Average Rainfall'
                },
                subtitle: {
                    text: 'Source: WorldClimate.com'
                },
                xAxis: {
                    categories: [
                        'Jan',
                        'Feb',
                        'Mar',
                        'Apr',
                        'May'
                    ]
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: 'Rainfall (mm)'
                    }
                },
                tooltip: {
                    headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                        '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
                    footerFormat: '</table>',
                    shared: true,
                    useHTML: true
                },
                plotOptions: {
                    column: {
                        pointPadding: 0.2,
                        borderWidth: 0
                    }
                },
                series: [{
                    name: 'Tokyo',
                    data: [49.9, 71.5, 106.4, 129.2, 144.0]


                }]
            });
        });
<script>

</script>
</body>

当我把它放在我的.tpl文件中时，它什么也没显示。任何人都可以说我做错了什么。我应该添加最新版本的jquery还是其他东西..

我还有一件事需要提及，当我尝试在一个单独的jsfiddle中使用它时，它也不会在那里工作。

Answer 1

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script src="http://code.highcharts.com/highcharts.js"></script>
    <script src="http://code.highcharts.com/modules/exporting.js"></script>
<script>
    $(function () {
            $('#container').highcharts({
                chart: {
                    type: 'column'
                },
                title: {
                    text: 'Monthly Average Rainfall'
                },
                subtitle: {
                    text: 'Source: WorldClimate.com'
                },
                xAxis: {
                    categories: [
                        'Jan',
                        'Feb',
                        'Mar',
                        'Apr',
                        'May'
                    ]
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: 'Rainfall (mm)'
                    }
                },
                tooltip: {
                    headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                        '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
                    footerFormat: '</table>',
                    shared: true,
                    useHTML: true
                },
                plotOptions: {
                    column: {
                        pointPadding: 0.2,
                        borderWidth: 0
                    }
                },
                series: [{
                    name: 'Tokyo',
                    data: [49.9, 71.5, 106.4, 129.2, 144.0]


                }]
            });
        });
</script>
</head>
<body>
    <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>

Answer 2

你很可能没有包含jquery。我在jsfiddle中粘贴了确切的代码（没有额外的脚本标记）并且它有效。

http://jsfiddle.net/3zgjgvhu/

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 3

确保在发生错误时始终先尝试jQuery document ready function。

<head>
 <script src="/js/jquery-3.2.1.min.js"></script>
</head>

<script type="text/javascript">
  $(document).ready(function(){
    / / code
  });
</script>

Answer 4

请按照给定的顺序在头标题处添加此脚本。

SRC =＆＃34; HTTP：//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"＆GT;

SRC =＆＃34; HTTP：//code.highcharts.com/highcharts.js"＆GT;

SRC =＆＃34; HTTP：//code.highcharts.com/modules/exporting.js"＆GT;

Answer 5

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<script>
$(function () {

    var issueData = {"WAR":13,"VTO":14,"EXWH":33};
    var pieData = [];
    for (i in issueData) {
        pieData.push([i,issueData[i]] );
    }


    $('#container').highcharts({
        chart: {
        type: 'pie',
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
         title: {
            text: 'Total tickets for each project'
        },
        tooltip: {
           pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    color: '#000000',
                    connectorColor: '#000000',
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                }
            }
        },

          series: [{
            data: pieData
        }]

    });
});
$(function () {

    var issueData = {"bug":8,"false":5};
    var pieData = [];
    for (i in issueData) {
        pieData.push([i,issueData[i]] );
    }


    $('#container1').highcharts({
        chart: {
        type: 'pie',
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
         title: {
            text: 'WAR DOne status '
        },
        tooltip: {
           pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    color: '#000000',
                    connectorColor: '#000000',
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                }
            }
        },

          series: [{
            data: pieData
        }]
    });
});
$(function () {

    var issueData = {"true":3,"false":11};
    var pieData = [];
    for (i in issueData) {
        pieData.push([i,issueData[i]] );
    }


    $('#container2').highcharts({
        chart: {
        type: 'pie',
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
         title: {
            text: 'VTO DOne status '
        },
        tooltip: {
           pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    color: '#000000',
                    connectorColor: '#000000',
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                }
            }
        },

          series: [{
            data: pieData
        }]
    });
});
$(function () {

    var issueData = {"true":8,"false":6};
    var pieData = [];
    for (i in issueData) {
        pieData.push([i,issueData[i]] );
    }


    $('#container3').highcharts({
        chart: {
        type: 'pie',
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
         title: {
            text: 'EXWH DOne status '
        },
        tooltip: {
           pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    color: '#000000',
                    connectorColor: '#000000',
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                }
            }
        },

          series: [{
            data: pieData
        }]
    });
});
</script>

<title>Charts</title>
</head>
<body>
<div id="container" style="height: 400px"></div>
<div id="container1" style="height: 400px"></div>
<div id="container2" style="height: 400px"></div>
<div id="container3" style="height: 400px"></div>
</body>
</html>

Highcharts没有出现

5 个答案: