【问题标题】:jqplot changes the color of graph on mouse hoverjqplot 在鼠标悬停时改变图形的颜色
【发布时间】:2011-05-01 06:00:12
【问题描述】:

jqPlot 会在鼠标悬停时更改填充颜色...我想移除该效果...如何??

这里是使用的选项:

var options={
    series: [{
            neighborThreshold: -1,
            shadowAngle:0,
            shadowOffset:2.5,
            shadowAlpha:.05,
            shadowDepth:5
        }],
    seriesDefaults: {
        color: '#224',
        fill: true,        // fill under the line,
        fillAndStroke: true,       // *stroke a line at top of fill area.
        fillColor: '#66CCCC',       // *custom fill color for filled lines (default is line color).
        fillAlpha: 0.2,       // *custom alpha to apply to fillColor.
        markerRenderer: $.jqplot.MarkerRenderer,    // renderer to use to draw the data
        // point markers.
        markerOptions: {
            show: false,             // wether to show data point markers.
            style: 'filledCircle',  // circle, diamond, square, filledCircle.
            // filledDiamond or filledSquare.
            lineWidth: 2,       // width of the stroke drawing the marker.
            size: 9,            // size (diameter, edge length, etc.) of the marker.
            color: '#FFFF00',    // color of marker, set to color of line by default.
            shadow: true,       // wether to draw shadow on marker or not.
            shadowAngle: 45,    // angle of the shadow.  Clockwise from x axis.
            shadowOffset: 1,    // offset from the line of the shadow,
            shadowDepth: 3,     // Number of strokes to make when drawing shadow.  Each stroke
            // offset by shadowOffset from the last.
            shadowAlpha: 0.07   // Opacity of the shadow
        },
        trendline: {
            show: false,         // show the trend line
            color: '#666666',   // CSS color spec for the trend line.
            label: '',          // label for the trend line.
            type: 'linear',     // 'linear', 'exponential' or 'exp'
            shadow: true,       // show the trend line shadow.
            lineWidth: 1.5,     // width of the trend line.
            shadowAngle: 45,    // angle of the shadow.  Clockwise from x axis.
            shadowOffset: 1.5,  // offset from the line of the shadow.
            shadowDepth: 3,     // Number of strokes to make when drawing shadow.
            // Each stroke offset by shadowOffset from the last.
            shadowAlpha: 0.07   // Opacity of the shadow
        }
    },
    grid: {
        drawGridLines: true,        // wether to draw lines across the grid or not.
        gridLineColor: '#d0d0d0',    // *Color of the grid lines.
        background: '#ffffff',      // CSS color spec for background color of grid.
        borderColor: '#ffffff',     // CSS color spec for border around grid.
        borderWidth: 2.0,           // pixel width of border around grid.
        shadow: true,               // draw a shadow for grid.
        shadowAngle: 45,            // angle of the shadow.  Clockwise from x axis.
        shadowOffset: 1.5,          // offset from the line of the shadow.
        shadowWidth: 3,             // width of the stroke for the shadow.
        shadowDepth: 3,             // Number of strokes to make when drawing shadow.
        // Each stroke offset by shadowOffset from the last.
        shadowAlpha: 0.07,           // Opacity of the shadow
        renderer: $.jqplot.CanvasGridRenderer,  // renderer to use to draw the grid.
        rendererOptions: {}         // options to pass to the renderer.  Note, the default
        // CanvasGridRenderer takes no additional options.
    },
    axes: {
        xaxis: {
            renderer:$.jqplot.DateAxisRenderer,
            rendererOptions:{tickRenderer:$.jqplot.CanvasAxisTickRenderer},
            tickOptions:{
                formatString:'%b %#d,%y'

            }
        },
        yaxis: {      
            labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
            borderColor:'#808080',
            renderer: $.jqplot.LogAxisRenderer,
            autoscale:true,
            min:0,
            tickOptions:{formatString:'$%.2f'}
        }
    },
    highlighter: {
        show:true,
        sizeAdjust: 7.5
    },
    cursor:{zoom:true, showTooltip:true},
    legend:{show:false}
};

【问题讨论】:

  • 看看你的代码会很有趣...
  • 它很容易创建,只需获取一个简单的图表,在系列默认值中设置“fill:true”,添加缩放控制器,您就会明白我的意思了。将在几个小时内发布代码,我从工作场所回来...

标签: javascript mouseover jqplot


【解决方案1】:

jqueryplot 版本 0.9.7-546 及更高版本发生了变化,为系列添加了一些新属性:

seriesDefaults: {
    rendererOptions: {
        highlightMouseOver: true,
        highlightMouseDown: false,
        highlightColor: null,
    },
},

如果您将 highlightMouseOver 设置为 false,则此设置会消失。

More details are available in the source code for the line renderer

【讨论】:

  • 谢谢 Sean :) 我很高兴有人终于在这个线程中发布了一些有用的东西 :) 我浏览了 jqplot 的源文件,但没有找到任何东西,除了我必须改变他们的绘图功能...
  • 是的,我花了一段时间才弄明白,但由于我看到几个关于它的问题没有答案,所以我决定挖掘一下。我下载了大约十几个版本,并尝试用它们来隔离它从哪里开始出现这种行为,然后我在版本之间做了一个差异。不幸的是,这导致了 3,000 多行差异,但在一次错误的开始之后,我能够通过搜索差异找到更改。
  • 感谢 Sean 的努力 :) 解决方案运行良好...接受您的回答 :)
  • 你知道是否有一种(简单的)方法可以改变悬停效果的行为吗?例如更改悬停不透明度或填充?
猜你喜欢
  • 2012-02-26
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-03-20
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多