Question

我在jQplot上有一些系列，我为其设置了高亮选项。我的想法是使用％H：％M：％S作为高亮时间格式和％H：％M但不能设置它。

        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轴上使用的日期/时间格式不同的日期/时间格式，而不是使用formatString，则可以使用tooltipContentEditor定义一个函数，该函数将返回要在工具提示中显示的格式化字符串。

假设您希望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，它从系列中检索日期/时间并使用$ .jqplot.DateTickFormatter对其进行格式化。然后，该函数将字符串连接在一起以返回要在工具提示中显示的文本。正确格式化日期/时间的关键行是：

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

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

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

jQplot在xaxis和高亮显示不同的时间格式

1 个答案: