English 中文(简体)
jqPlot Pie pie 图表显示发音,但抛出、错误和行为古怪?
原标题:jqPlot Pie chart Rendering but throws and error and behaaves weird?

我用 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

在火虫控制台。当我点击任何一块饼图时,我看到一个更奇怪的事件,我点击的切片消失了。

在单击馅饼图表前显示如下:-

"https://i.sstatic.net/Dhtuq.png" alt="原件派图"/>

当我点击棕色区域后, 馅饼变成下面显示的东西, 甚至棕色片也消失了。

"https://i.sstatic.net/3Mxcy.png" alt="没有棕色切片的皮图"/>

请为上述内容提供解决方案 。 我尝试过不同的配置, 但工作方式不同 。 同时让我告诉您, 我使用其他插件, 如此页面上的条纹和光标 。

我在下面提到我的网页的整个源代码,我这样做的地方是:

<!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;

当我删除上述内容时,我在需要时和需要时都引用单个插件。当该语句出现时,所有插件都被启用,这是输出怪异的原因。

问题回答

对于您的问题部分, 您正在丢失突出显示插件 。 如果您加上它, 拖曳 < a href=" http://jsfiddle. net/ Boro/ ZkWcz/ 9/" rel= “ nofollow” > 的线条图表 < / a > 上的点数将会很好。 它不会丢弃例外, 但出于某种原因拖曳看起来丑陋。 如果您禁用 < code> recess Defaults 中的 < code > < defaults < /code >, 我检查过它, 如果它看起来不难看, 很明显它们有些冲突 。

正如我观察到的馅饼图表没有连接可拖动脚本, 因为当它被禁用时它表现良好 。

<强度 > EDIT:

I figure out how to enable the dragable for a particular plugin which @Shiv Kumar Ganesh used to solve the problem. It is show here. Important are: to set isDragable: true for series, and show: true for highlighter.





相关问题
selected text in iframe

How to get a selected text inside a iframe. I my page i m having a iframe which is editable true. So how can i get the selected text in that iframe.

How to fire event handlers on the link using javascript

I would like to click a link in my page using javascript. I would like to Fire event handlers on the link without navigating. How can this be done? This has to work both in firefox and Internet ...

How to Add script codes before the </body> tag ASP.NET

Heres the problem, In Masterpage, the google analytics code were pasted before the end of body tag. In ASPX page, I need to generate a script (google addItem tracker) using codebehind ClientScript ...

Clipboard access using Javascript - sans Flash?

Is there a reliable way to access the client machine s clipboard using Javascript? I continue to run into permissions issues when attempting to do this. How does Google Docs do this? Do they use ...

javascript debugging question

I have a large javascript which I didn t write but I need to use it and I m slowely going trough it trying to figure out what does it do and how, I m using alert to print out what it does but now I ...

Parsing date like twitter

I ve made a little forum and I want parse the date on newest posts like twitter, you know "posted 40 minutes ago ","posted 1 hour ago"... What s the best way ? Thanx.

热门标签