JqPlot 条形图和折线图答案

【问题标题】：JqPlot Bar and Line ChartJqPlot 条形图和折线图
【发布时间】：2012-10-16 06:22:48
【问题描述】：

我有一个由 jqplot 制成的折线图和条形图。问题是，每当我将光标放在条形图上时，折线图就会变得不可见。我希望用户能够在线图上移动光标，以便向用户突出显示一些信息。提前致谢。

编辑：

function gkDrawBarAndLineChart(location) {
var s1 = [4, 7, 9, 15];
var s2 = [12, 6, 19, 8];
var s3 = [[1, 28], [2, 13], [3, 54], [4, 47]];
var values=  [s1,s2,s3]
var dates = ['2012-10-22', '2012-10-23', '2012-10-24', '2012-10-25']

                var optionsObj = {
                title: 'Report',
                 animate: !$.jqplot.use_excanvas,
                axes: {
                     xaxis: {
                        renderer: $.jqplot.CategoryAxisRenderer,
                        ticks: dates
                    },
                    yaxis: {
                        tickOptions: { showMark: true, formatString: "%d" }, 
                        padMin: 0   
                    },
                },

                grid: {
                    borderColor: "#fff",
                    background: "#FFF",
                    drawGridlines: true,
                    shadow: true
                }, 

                series: [
                    {label:'Open',renderer:$.jqplot.BarRenderer, },
                    {label:'Incoming', renderer:$.jqplot.LineRenderer, color:'red', },
                    {label:'Resolved', renderer:$.jqplot.LineRenderer, color:'green'}
                    ],

                legend: {
                    show: true,
                    location: 'ne'
                    },
                seriesDefaults:{
                    shadow: false,
                    rendererOptions:{
                       barPadding: 0,
                       barMargin: 10,
                       barWidth: 25,
                   },
                },
                highlighter : {
                show : true,
                sizeAdjust : 7.5,
                formatString:'<table class="jqplot-highlighter"> \
                              <tr><td>Timestamp:</td><td>%s</td></tr> \
                              <tr><td>Value:</td><td>%s</td></tr>',
                },
            };

                var plot2 = $.jqplot(location, values, optionsObj);
            }

【问题讨论】：

如能提供样本数据将不胜感激
我已经添加了数据。看看吧！

标签： jquery user-interface jquery-plugins jqplot

【解决方案1】：

试试下面的

seriesDefaults:{
                  shadow: false,
                  rendererOptions:{
                   barPadding: 0,
                   barMargin: 10,
                   barWidth: 25,
                  highlightMouseDown: true
               }    //Removing the Comma
            },

【讨论】：

【解决方案2】：

这是fiddle 为您工作

根据 jqplot，您可以使用 highlightMouseDown: true 关闭默认突出显示

【讨论】：

但是当我将光标放在折线图上时，它们仍然消失了。
在 jQplot 演示和示例中找到它们 :)
哦，伙计，我一直在寻找它，就像地狱在文档思想中的任何地方都找不到它

【解决方案3】：

如果我理解正确，将鼠标悬停在条形图上会使折线图不可见。解决方案是在 BarRenderer 选项中添加“highlightMouseOver: false”。

renderer: $.jqplot.BarRenderer,
      rendererOptions: {
         highlightMouseOver: false
      }

小提琴：http://codepen.io/alkuzad/pen/LpyawY

【讨论】：