jQplot 在 x 轴上绘制不同的时间格式并突出显示

Question

我有一些关于 jQplot 的系列，我为其设置了突出显示选项。我的想法是在突出显示和 %H:%M 中使用 %H:%M:%S 作为时间格式，但无法设置它。

        axes:{
            xaxis:{
                autoscale: true,
                renderer: $.jqplot.DateAxisRenderer,
                tickRenderer: $.jqplot.CanvasAxisTickRenderer,
                tickOptions: {
                    showTicks: true,
                    formatString:'%e %b %H:%M:%S',
                    fontSize: '11px',
                },
            },
        },
        highlighter: {
            show: true,
            sizeAdjust: 12,
            tooltipContentEditor: customTooltip,
            formatString: '#serieLabel#<br/>%s | %s',
        },

Answer 1

如果您想在工具提示（突出显示）中使用与 x 轴上使用的 date/time 格式不同的 date/time 格式，而不是使用 formatString，您可以使用tooltipContentEditor 定义一个函数，该函数将 return 格式化字符串显示在工具提示中。

假设您希望 x 轴以 %e %b %H:%M:%S 格式显示日期（例如 10 月 29 日 04:12:12），但您希望工具提示以 %H:%M 格式显示日期（例如 12:12) 您可以使用以下代码（与上面的代码片段相同）来定义 axes:

axes: {
  xaxis: {
    autoscale: true,
    renderer: $.jqplot.DateAxisRenderer,
    tickRenderer: $.jqplot.CanvasAxisTickRenderer,
    tickOptions: {
      showTicks: true,
      formatString: '%e %b %H:%M:%S',
      fontSize: '11px',
    },
  },
},

和下面的代码来定义highlighter：

highlighter: {
  show: true,
  sizeAdjust: 12,
  tooltipContentEditor: function(str, seriesIndex, pointIndex, plot) {
    // x-axis value
    var date = series[seriesIndex][pointIndex][0];
    // jqPlot formatter function for date/time (used by $.jqplotDateTickFormatter)
    var formatter = $.jqplot.DateTickFormatter;
    // Do the formatting
    var formattedDate = formatter('%H:%M', date);
    // y-axis value for series hovered over
    var seriesValue = series[seriesIndex][pointIndex][1];
    return '#serieLabel#<br/>' + formattedDate + '|' + seriesValue;

  }
},

这里我们使用自定义函数 tooltipContentEditor，它从悬停的系列中检索 date/time 并使用 $.jqplot.DateTickFormatter 对其进行格式化。然后该函数将字符串连接在一起以 return 显示在工具提示中的文本。正确格式化 date/time 的关键行是：

// DateAxisRenderer
var formatter = $.jqplot.DateTickFormatter;
// Do the formatting
var formattedDate = formatter('%H:%M', date);

当鼠标悬停在数据点上时，会产生以下工具提示：

一个工作示例可以是 seen here。

jQplot 在 x 轴上绘制不同的时间格式并突出显示

jQplot different time format on xaxis and highlight

time

format

highlight

jqplot