Highchart with Prototype

问题

I needed to use prototype.js to make web service call and then use highchart.js to plot the chart. I am using the prototype-adapter.js as advised but still i get error if i try to use both together(highchart and prototype). I created a jsFiddle

http://jsfiddle.net/j5Grq/6/

$(function () {
var chart;
$(document).ready(function () {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'line',
            marginRight: 130,
            marginBottom: 25
        },
        title: {
            text: 'Monthly Average Temperature',
            x: -20 //center
        },
        subtitle: {
            text: 'Source: WorldClimate.com',
            x: -20
        },
        xAxis: {
            categories: ['09/10', '09/11', '09/12', '09/13', '09/14']
        },
        yAxis: {
            title: {
                text: 'Temperature (°C)'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            formatter: function () {
                return '<b>' + this.series.name + '</b><br/>' + this.x + ': ' + this.y + '°C';
            }
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: -10,
            y: 100,
            borderWidth: 0
        },
        series: [{
            name: 'ABCD',
            data: [648.47, 636.43, 643.97, 640.92]
        }, {
            name: 'ABCD1',
            data: [899.46, 882.80, 893.29, 889.07]
        }, {
            name: 'ABCD2',
            data: [1359.06, 1328.04, 1349.74, 1342.52]
        }]
    });
});

});

If i remove the prototype.js ans prototype-adapter.js then chart plotted well but if i include them chart doesn't work. I needed the prototype.js to make a web service call.

Please help.

Thankyou

回答1:

It doesn't work, because you use $(document).ready(); which is jquery declaration.

回答2:

Wrap your jQuery into an anonymous function to protect the variable from being interfered with by Prototype. http://jsfiddle.net/amyamy86/s6ms3/

(function($) {

    $.noConflict();
    $(function () {
        $('#contain').highcharts({
         ....
        });
     });

}(jQuery));

回答3:

Try this code and will work without problems.

I just replaced

 $(function () {

for this

jQuery(function($) {

Here is the answer with your graph.

 http://jsfiddle.net/j5Grq/17/

来源：https://stackoverflow.com/questions/15074474/highchart-with-prototype

标签

Highcharts