0

私はJqPlotを使用しています。

これが私のフィドルで、以下が私のスクリーンショットです。2 つの y 軸を使用しています。左の y 軸には収益があり、右の y 軸にはページ ビューがあります。

下の例に示すように、行にカーソルを合わせると、ビューと収益の両方をツールチップに表示したいと思います。一度に 2 つの軸からしかデータを取得できません。

何かご意見は ？

ここに画像の説明を入力

以下は私のコードです

$(document).ready(function () {

  $.jqplot.config.enablePlugins = true;

  s1 = [['23-May-08',1, 11],['24-May-08',4, 14],['25-May-08',2, 22],['26-May-08', 6, 26]];
  s2 = [['23-May-08',11, 1],['24-May-08',14, 4],['25-May-08',22, 2],['26-May-08', 26, 6]];

  plot1 = $.jqplot('chart',[s1, s2],{
     title: 'Highlighting, Dragging, Cursor and Trend Line',
     axes: {
         xaxis: {
             renderer: $.jqplot.DateAxisRenderer,
             tickOptions: {
                 formatString: '%#m/%#d/%y'
             },
             numberTicks: 4
         },
         yaxis: {
             tickOptions: {
                 formatString: '$%.2f'
             }
         }
     },
     highlighter: {
         show:true,
     },
     cursor: {
         show: true
     },
      series: [
        {
            lineWidth: 2,
            highlighter: { formatString: "<div style='background-color:white; border:1px #ddd solid; width:220px; height:60px'>%s . Views : %s Revenue : %s </div>" }
        },
        {
            yaxis: 'y2axis',
            highlighter: { formatString: "<div style='background-color:white; border:1px #ddd solid; width:220px; height:60px'>%s . Views : %s Revenue : %s </div>" }
        }]
  });
});​
4

2 に答える 2

10

これが私がしたことです、私は のtooltipContentEditorプロパティを使用しましたhighlighter。ここで更新されたフィドルをチェックしてください。

ここに画像の説明を入力

series: [
{
    lineWidth: 2,
    highlighter: {
        show: true,
        tooltipContentEditor: function (str, seriesIndex, pointIndex, plot) {

            var date = plot.data[seriesIndex][pointIndex][0];
            var revenue = plot.data[seriesIndex][pointIndex][3];
            var views = plot.data[1][pointIndex][4];

            var html = "<div>Date : ";
            html += date;
            html += "  <br>Money : ";
            html += revenue;
            html += "  <br>Views : ";
            html += views;
            html += "  </div>";

            return html;
        }
    }
},
{
    yaxis: 'y2axis',
    highlighter: {
        show: true,
        tooltipContentEditor: function (str, seriesIndex, pointIndex, plot) {

            var date = plot.data[seriesIndex][pointIndex][0];
            var views = plot.data[seriesIndex][pointIndex][5];
            var revenue = plot.data[0][pointIndex][6];

            var html = "<div>Date : ";
            html += date;
            html += "  <br>Money : ";
            html += revenue;
            html += "  <br>Views : ";
            html += views;
            html += "  </div>";

            return html;
        }
    }
}]
于 2012-12-06T06:05:35.910 に答える
1

代わりに

plot.data[seriesIndex][pointIndex]

これを使って

plot.series[seriesIndex].data[pointIndex]

plot.data はユーザー指定のデータ (ソートされていない可能性があります) を保持するためです。

そして、plot.series は、プロットされたデータを保持します (sortdata がデフォルトの true の場合、ソートされる可能性があります)。

于 2013-01-11T14:53:00.040 に答える