javascript - jqPlot 饼图渲染但抛出错误并且表现得很奇怪？-6ren

javascript - jqPlot 饼图渲染但抛出错误并且表现得很奇怪？

转载作者：行者123 更新时间：2023-11-30 18:26:17

24

4

我使用 jqPlot 制作了一个饼图并且饼图确实呈现了，我的代码在下面提到

var plot4 = $.jqplot('pie', [[["none",10],["error",20],["click",30],["impression",40]]], {
        seriesDefaults:{
            renderer:$.jqplot.PieRenderer,
            rendererOptions:{ sliceMargin: 0 }
        },
        legend:{ show: true }     
    });

我面临的问题是，当我将鼠标悬停在饼图上时，出现错误提示

B.axes[D[0]]._ticks[0] is undefined

在 Firebug 控制台上。当我点击饼图的任何一个切片时，我看到了一个更奇怪的现象，即我点击的整个切片消失了。

点击前饼图如下所示:-

Original Pie Chart

在我点击棕色区域后，馅饼变成了如下所示的东西，甚至棕色切片也消失了。

Pie Chart without the brown slice

请提供上述解决方案。我尝试了不同的配置，但效果不佳。另外让我告诉你我正在使用其他插件，例如此页面上的条形图和光标。

我在下面提到了我正在执行此操作的页面的完整源代码:-

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>jqPlot Demo</title>
<!--[if IE]><script src="./js/excanvas.min.js"></script><![endif]-->
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/jquery.jqplot.js"></script>
<script type="text/javascript" src="./js/jqplot.cursor.min.js"></script>
<script type="text/javascript" src="./js/jqplot.dragable.min.js"></script>
<script type="text/javascript" src="./js/jqplot.trendline.min.js"></script>
<script type="text/javascript" src="./js/jqplot.barRenderer.min.js"></script>
<script type="text/javascript" src="./js/jqplot.pieRenderer.min.js"></script>
<script type="text/javascript" src="./js/jqplot.canvasAxisLabelRenderer.min.js"></script>
<script type="text/javascript" src="./js/jquery-ui.min.js"></script>
<link rel="stylesheet" href="./css/jquery.jqplot.min.css"/>
<link rel="stylesheet" href="./css/jqPlot.css"/>
<script>
$(document).ready(function(){
    $.jqplot.config.enablePlugins = true;
    var lineGraph=$.jqplot('chart',  [[[10, 2],[30,5.12],[50,13.1],[70,33.6],[90,85.9],[11,20.9]]],
            {
            title:'Exponential Line',
            axes:{yaxis:{min:0,max:100},xaxis:{min:0,max:100}},
            legend:{
                show:true,
                location:'se',
                xoffset:12,
                yoffset:0
                },
            grid:{
                    gridLineColor:'#F2F2F2',
                    background:'#FFFFFF',
                    borderWidth:1,
                    borderColor:'#BBBBBB',
                    shadow:true,
                    shadowAmgle:45,
                    shadowWidth:2,
                    shadowOffset:2,
                    shadowDepth:2
                    },
           cursor:{
                     style: 'pointer',
                     show:false,
                     showTooltip: true,
                     followMouse:true,
                     tooltipOffset:10,
                     tooltipLocation:'se'
                  },
           highlighter: {
                        lineWidthAdjust: 2.5,
                        sizeAdjust: 5,          
                        showTooltip: true,     
                        tooltipLocation: 'nw', 
                        fadeTooltip: true,     
                        tooltipFadeSpeed: "fast",
                        tooltipOffset: 2,       
                        tooltipAxes: 'both',   
                        tooltipSeparator: ', ',
                        useAxesFormatters: true,
                        tooltipFormatString: '%.5P'
                    },
           seriesDefaults:{
                       trendline:{
                                show:true,
                                color:'#A2D379',
                                lable:'trendX',
                                lineWidth:2,
                                shadow:true
                                    },
                       color:'#058DC7',
                       lineWidth:5,
                       fill:true,
                       fillAndStroke:true,
                       fillColor:'#E6F4F9'
                       }

            });
    var plot4 = $.jqplot('pie', [[["none",10],["error",20],["click",30],["impression",40]]], {
        seriesDefaults:{
            renderer:$.jqplot.PieRenderer,
            rendererOptions:{ sliceMargin: 0 }
        },
        legend:{ show: true },
        cursor: {   
            show: false   
        }
    });
});
$('document').ready(function(){
        $('.column').sortable({
            connectWith:'.column',
            handle:'h2',
            cursor:'move',
            placeholder:'placeholder',
            forcePlaceholderSize:true,
            opacity:0.4,
            revert:true

        }).disableSelection();
}


    );
</script>
</head>
<body>
 <div class="column" id="column1">
        <div class="dragbox" id="item1" >
            <h2>Handle 1</h2>
            <div class="dragbox-content" >
                <div id="chart" style="width:100%;height:100%;float:left"></div>
            </div>
        </div>
 </div>
 <div class="column" id="column1">
        <div class="dragbox" id="item1" >
            <h2>Handle 1</h2>
            <div class="dragbox-content" >
                <div id="pie" style="width:100%;height:100%;float:left"></div>
            </div>
        </div>
 </div>
 <div class="column" id="column1">
        <div class="dragbox" id="item1" >
            <h2>Handle 1</h2>
            <div class="dragbox-content" >
                <div id="chart1" style="width:400px;height:300px;float:left"></div>
            </div>
        </div>
 </div>


<div id="barRender" style="width:400px;height:300px;float:left"></div>
</body>
</html>

最佳答案

好的，我得到了问题的答案。我们只需要删除一行代码，之后一切正常

 $.jqplot.config.enablePlugins = true;

当我删除上面的内容时，我会在需要的时候和需要的地方调用单独的插件。当这条语句存在时，所有插件都被启用，这就是奇怪输出的原因。

关于javascript - jqPlot 饼图渲染但抛出错误并且表现得很奇怪？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10717370/

24

4

0

文章推荐： c# - 在 C# 中使用 LINQ 过滤可变数量的参数

文章推荐： javascript - 比较两个图像是否相等(跨域)

文章推荐： c# - 无法找到程序集 Entity Framework v 4.4.0.0

javascript - 谷歌地图自动完成弹回已经清除的文本......奇怪......奇怪......奇怪
我有这种来自 Google map 自动完成的奇怪行为(或者我可能错过了某事)...想法？奇怪的: 您在输入中输入某物，例如“伦敦” 您按 [ENTER] 你按下 [CLEAR] 按钮你点击进入'输
Java意外类型做字符串比较，奇怪
这段代码与《Learning Java》(Oracle Press Books)一书中的代码完全一样，但它不起作用。我不明白为什么它不起作用，它应该起作用。我用 OpenJDK 和 Sun JDK 7
Powershell 对新行使用反引号 - 奇怪
示例 1 中究竟发生了什么？这是如何解析的？ # doesnt split on , [String]::Join(",",("aaaaa,aaaaa,aaaaa,aaaaa,aaaaa,aa
iphone - 指针类型不兼容？？奇怪
我需要获得方程式系统的解决方案。为此，我使用函数sgesv_()。一切都很好，它使我感到解决方案的正确结果。但是我得到一个奇怪的警告。警告:从不兼容的指针类型传递'sgesv_'的参数3 我正在
ios - 奇怪!动画完成后是否一直调用函数？
我目前在制作动画时遇到一个奇怪的问题: [UIView animateWithDuration:3 delay:0
jQuery 不工作 - 奇怪
alert('works'); $(window).load(function () { alert('does not work'); });
java - 静态内部类 - 奇怪
我的代码: public class MyTest { public class StringSorter implements Comparator { public
JavaScript 对象更新行为(奇怪？)
我正在学习 JavaScript。尝试理解代码， function foo (){ var a = b = {name: 'Hai'}; document.write(a.name +''
c++ - GetLastError() != 奇怪
这个问题不太可能帮助任何 future 的访问者；它只与一个小的地理区域、一个特定的时间点或一个非常狭窄的情况有关，这些情况并不普遍适用于互联网的全局受众。为了帮助使这个问题更广泛地适用，visit
Linux 环境 -i 奇怪
这按预期工作: [dgorur@ted ~]$ env -i env [dgorur@ted ~]$ 这样做: [dgorur@ted ~]$ env -i which date which: no
c++ - 指针增量 - 奇怪
struct BLA { int size_; int size()const{ return size_; } } int x; BLA b[ 2 ]; BLA * p = &b[
css - 图像垂直对齐与 css - 奇怪
我有以下代码: #test img {vertical-align: middle;} div#test { border: 1px solid green; height: 150px; li
gcc - (奇怪？)GCC 预处理器行为
我想大多数使用过 C/C++ 的人都对预处理器的工作原理有一定的直觉(或多或少)。直到今天我也是这么认为的，但事实证明我的直觉是错误的。故事是这样的: 今天我尝试了一些东西，但我无法解释结果。首先考虑
OCMock只生效一次，奇怪，为什么？或者我这边有什么问题？
我想为 TnSettings 做 mock，是的，如果通过以下方法编写代码，它就可以工作，问题是我们需要为每个案例编写 mock 代码，如果我们只 mock 一次然后执行多个案例，那么第二个将报告异常
c - 溢出？找不到来源，奇怪
我的项目中有以下两个结构 typedef volatile struct { unsigned char rx_buf[MAX_UART_BUF]; //Input buffer over U
c# - 奇怪，regex.split方法匹配一个null元素
Regex rx = new Regex(@"[+-]"); string[] substrings = rx.Split(expression); expression = "-9a3dcb
java - JDBC 连接被对等方关闭(奇怪)
我的两个应用程序遇到了一个奇怪的问题。这是设置: 两个 tomcat/java 应用程序，在同一个网络中运行，连接到相同的 MS-SQL-Server。一个应用程序，恰好按顺序位于 DMZ 中可从互联
Android OnLongClickListener 奇怪/不可靠的行为
我目前正在与 Android Api Lvl 8 上的 OnLongClickListener 作斗争。拿这段代码: this.webView.setOnLongClickListener(new
java - JUnit 奇怪 - 我未指定预期数量
这个问题不太可能帮助任何 future 的访问者；它只与一个小的地理区域、一个特定的时间点或一个非常狭窄的情况相关，这些情况并不普遍适用于互联网的全局受众。为了帮助使这个问题更广泛地适用，visit
objective-c - performSelectorOnMainThread 奇怪
只是遇到了奇怪的事情。我有以下代码: -(void)ImageDownloadCompleat { [self performSelectorOnMainThread:@selector(up

首页

博学

6Ren·AI

商城

javascript - jqPlot 饼图渲染但抛出错误并且表现得很奇怪？