Question

我正在使用jQuery Flot Chart并尝试根据自己的喜好配置工具提示。

我要创建的图表是一个堆积图，并且有两个重叠的图表，每个线条图上都有12个点或标记。

每个点表示每个图形的年份可以追溯到一年前。

可能更容易在图片中描述。如传说中所述，浅蓝色是前12个月，而黄色是前12个月。

无论如何，我像这样在绘图实例中初始化自己的自定义变量yearrange

$.plot($(".flot-line"), [{
            label: "Previous Year",
            yearrange: "Jul-2017 - Jun-2018",
            data: previousyear,
            color: "rgb(237,194,64)"
        }, {
            label: "Current Year",
            yearrange: "Jul-2018 - Jun-2019",
            data: currentyear,
            color: "rgb(175,216,248)"
        }]

然后使用此工具提示功能在每个点上覆盖工具提示

$.fn.UseTooltip = function () {
    $(this).bind("plothover", function (event, pos, item) {                         
        if (item) {
            if (previousPoint != item.dataIndex) {
                previousPoint = item.dataIndex;

                $("#tooltip").remove();

                var x = item.datapoint[0];
                var y = item.datapoint[1];                

                var currmonth = months[x-  1];
                var yearrange = item.series.yearrange;

                showTooltip(item.pageX, item.pageY,
                  "<strong> " + y + "</strong> (" + item.series.label + ")");
            }
        }
        else {
            $("#tooltip").remove();
            previousPoint = null;
        }
    });
};

所以-

我想在此工具提示函数中操作两个变量，以提供所需的输出。

var currmonth = months[x-  1];

输出我所悬停的X轴标签（例如Nov）

var yearrange = item.series.yearrange;

我在float中自定义变量插入的输出（例如Jul-2017 - Jun-2018）

例如，在当年var currmonth = Jul和var yearrange = Jul-2018 - Jun-2019

我的问题是在给定要使用的变量的情况下，如何才能创建变量，从而输出唯一的月份和年份组合。

说我的两个变量是Nov和Jul-2017 - Jun-2018。我希望获得的输出是在该月份范围内可能出现的唯一11月-November 2017。

如果我在当月的第一年中有某项内容，则变量Jul和变量Jul-2018 - Jun-2019-同样，在该范围内的唯一7月将是{{1} }。

Answer 1

您可以从这里开始-我对其进行了更新，因此您不必使用moment.js即可获得完整的月份名称：

const months = ",January,February,March,April,May,June,July,August,September,October,November,December".split(",")
const monthArr = months.map((month) => month.substring(0,3));
const pad = (num) => ("0"+num).slice(-2);

let getMonthYear = (curMonth,range) => {
  // Note: all string manipulation
  const curMonthStr = pad(monthArr.indexOf(curMonth));
  const [start,end] = range.split(" - ").map(
    d => d.replace(/(\w+)-(\d+)/,(m,a,b) => b+pad(monthArr.indexOf(a)))
  );
  const curYearMonthStart = start.slice(0,-2)+curMonthStr;
  const curYearMonthEnd   = end.slice(0,  -2)+curMonthStr;
  let curYearMonth        = curYearMonthStart;
  if (curYearMonth<start) curYearMonth = curYearMonthEnd; // which one do we take?
  return curYearMonth >= start && curYearMonth <=end ? months[monthArr.indexOf(curMonth)] + " " + curYearMonth.slice(0,-2) : "";
}

const range = "Jun-2018 - Jun-2019";

let curMonth = "Nov";
console.log(
  getMonthYear(curMonth,range)
)  
curMonth = "Jul";
console.log(
  getMonthYear(curMonth,range)
)

从月份变量和月份范围返回月份和年份

1 个答案: