Ruby on rails UncaughtTypeError:undefined不是iam在jquery中嵌入ruby时的函数_Ruby On Rails

Ruby on rails UncaughtTypeError:undefined不是iam在jquery中嵌入ruby时的函数

ruby-on-rails

Ruby on rails UncaughtTypeError:undefined不是iam在jquery中嵌入ruby时的函数,ruby-on-rails,Ruby On Rails,index.html.erb：这里我集成了我的highcharts和渲染视图 i have a table in my main page in which left side i want to show one graph and right side i want to show second one. when iam redering both view from my index.html.erb its showing me above error and just

index.html.erb：这里我集成了我的highcharts和渲染视图

        i have a table in my main page in which left side i want to show one graph and right side i want to show second one. when iam redering both view from my index.html.erb its showing me above error and just showing me only one graph. if i show only one graph it doesn't give any error.


“新建1%”
'新'>
2.new1.html.erb:-它的视图必须显示在左侧
$（函数（）{
//使颜色呈放射状
Highcharts.getOptions（）.colors=Highcharts.map（Highcharts.getOptions（）.colors，函数（color）{
返回{
径向梯度：{cx:0.5，cy:0.3，r:0.7}，
停止：[
[0，颜色]，
[1，Highcharts.Color（Color）.brighlight（-0.3）.get（'rgb'）]//darken
]
};
});
//绘制图表
$（“#饼”）。高图({
图表：{
plotBackgroundColor:null，
plotBorderWidth:null，
plotShadow：对
},
标题：{
文本：“”
},
工具提示：{
pointFormat:“{series.name}:{point.percentage:.1f}%”
},
打印选项：{
馅饼：{
allowPointSelect:true，
光标：“指针”，
数据标签：{
启用：对，
格式：“{point.name}:{point.percentage:.1f}%”，
风格：{
颜色：（Highcharts.theme&&Highcharts.theme.ContractTextColor）| |“黑色”
},
接头颜色：“银色”
}
}
},
系列：[{
键入“pie”，
名称：'计算'，
数据：
}]
});
});
3.new.html.erb:->其视图必须显示在右侧
$（函数（）{
//使颜色呈放射状
Highcharts.getOptions（）.colors=Highcharts.map（Highcharts.getOptions（）.colors，函数（color）{
返回{
径向梯度：{cx:0.5，cy:0.3，r:0.7}，
停止：[
[0，颜色]，
[1，Highcharts.Color（Color）.brighlight（-0.3）.get（'rgb'）]//darken
]
};
});
//绘制图表
$（'highpie'）。高图表({
图表：{
plotBackgroundColor:null，
plotBorderWidth:null，
plotShadow：对
},
标题：{
文本：“”
},
工具提示：{
pointFormat:“{series.name}:{point.percentage:.1f}%”
},
打印选项：{
馅饼：{
allowPointSelect:true，
光标：“指针”，
数据标签：{
启用：对，
格式：“{point.name}:{point.percentage:.1f}%”，
风格：{
颜色：（Highcharts.theme&&Highcharts.theme.ContractTextColor）| |“黑色”
},
接头颜色：“银色”
}
}
},
系列：[{
键入“pie”，
名称：'计算'，
数据：
}]
});
});

结论：->当我从我的index.html.erb重新定义两个视图时，它会显示上面的错误，并且只显示一个图形。如果我只显示一个图形，它不会给出任何错误

哇！您的index.html.erb无效，应位于css文件夹中，js脚本位于his中。你们都散开了

在我的两种观点中，我都使用了相同的代码和highcharts方法。我想
    <head>

        <!--Load the AJAX API-->
        <%= javascript_include_tag "highcharts"%>


    </head>
    <tr>
        <td width = "490">
        <b><%= render :partial =>  'new1' %></b>
        </td>

        <td width = "490" colspan = 2>
        <b><%= render :partial =>  'new' %></b>     

        </td>
    </tr>

   2. new1.html.erb:- its view which has to be showed left side

    <head>
    <script>
        $(function () {

        // Radialize the colors
        Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function (color) {
            return {
                radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
                stops: [
                    [0, color],
                    [1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
                ]
            };
        });

        // Build the chart
        $('#pie').highcharts({
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: true
            },
            title: {
                text: ''
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                        style: {
                            color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                        },
                        connectorColor: 'silver'
                    }
                }
            },
            series: [{
                type: 'pie',
                name: 'calculated',
                data: <%= raw @result1 %>

        }]
        });
    });
    </script>
    </head>
    <div id="pie" style="width:500px; height:300px; vertical-align: top;  display: inline-block; padding: 10px;">


  3.  new.html.erb:-> its view which has to be showed right side

    <head>


    <script>
        $(function () {

        // Radialize the colors
        Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function (color) {
            return {
                radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
                stops: [
                    [0, color],
                    [1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
                ]
            };
        });

        // Build the chart
        $('#highpie').highcharts({
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: true
            },
            title: {
                text: ''
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                        style: {
                            color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                        },
                        connectorColor: 'silver'
                    }
                }
            },
            series: [{
                type: 'pie',
                name: 'calculated',
                data: <%= raw @result %>

        }]
        });
    });
    </script>



    </head>
    <div id="highpie" style="width:500px; height:300px; vertical-align: top;  display: inline-block; padding: 10px;">

我稍微改变了highcharts的方法这对我来说很好
这是代码：->
$（函数（）{
//制作单色并将其设置为所有馅饼的默认颜色
Highcharts.getOptions（）.plotOptions.pie.colors=（函数（）{
var colors=[]，
base=Highcharts.getOptions（）.colors[0]，
我
对于（i=0；i<10；i+=1）{
//从底色变暗开始（负变亮），然后结束
//用一种更亮的颜色
colors.push（Highcharts.Color（base）.brighlight（（i-3）/7.get（））；
}
返回颜色；
}());
//绘制图表
$（'highpie'）。高图表({
图表：{
plotBackgroundColor:null，
plotBorderWidth:null，
plotShadow:false
},
标题：{
文本：“”
},
学分：{
已启用：false
},
工具提示：{
pointFormat:“{series.name}:{point.percentage:.1f}%”
},
打印选项：{
馅饼：{
allowPointSelect:true，
光标：“指针”，
数据标签：{
启用：对，
格式：“{point.name}:{point.percentage:.1f}%”，
风格：{
颜色：（Highcharts.theme&&Highcharts.theme.ContractTextColor）| |“黑色”
}
}
}
},
系列：[{
键入“pie”，
名称：“calucated”，
数据：
}]
});
});

hey iam正在使用aptana studio，因此我的highcharts.js文件位于app/assets/javascripts中，而我的这些视图位于app/views中。因此，我使用include标记集成我的文件。我说整合不是我的问题。当iam使用其中一个_new.html.erb或_new.html.erb时，会发生错误，并且只有一个图表可见。

in my both view i was using the same code and method of highcharts. i think
it was clashing i changed the highcharts method a little bit it worked fine for me


this is the code:->

<head>


<script>
$(function () {

    // Make monochrome colors and set them as default for all pies
    Highcharts.getOptions().plotOptions.pie.colors = (function () {
        var colors = [],
            base = Highcharts.getOptions().colors[0],
            i;

        for (i = 0; i < 10; i += 1) {
            // Start out with a darkened base color (negative brighten), and end
            // up with a much brighter color
            colors.push(Highcharts.Color(base).brighten((i - 3) / 7).get());
        }
        return colors;
    }());

    // Build the chart
    $('#highpie').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
        title: {
            text: ''
        },
          credits: {
         enabled: false
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                    style: {
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                    }
                }
            }
        },
        series: [{
            type: 'pie',
            name: 'calucated',
            data: <%= raw @result %>
        }]
    });
});
</script>



</head>
<div id="highpie" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>