将开始日期和结束日期添加为高图中的X轴标签

Add start-date and end-date as a Xaxis label in highchart

本文关键字:日期 高图中 标签 添加 开始 结束      更新时间:2023-09-26

我在图表中使用日期作为字符串。

如何在xAxis中使用开始日期和结束日期字符串变量作为标签?开始日期='10.02.2013'结束日期=2013年5月10日

随附代码和图表图像。我唯一需要做的就是添加startDateLabel和endDateLabel。

var dateEndLabel, dateStartLabel, i, j, lastDate, seriesData, x, y;
  i = 0;
  seriesData = new Array();
  lastDate = data[i].Values.length - 1;
  dateStartLabel = data[i].Values[0].Time;
  dateEndLabel = data[i].Values[lastDate].Time;
  while (i < data.length) {
    seriesData[i] = [];
    j = 0;
    x = [];
    y = [];
    while (j < data[i].Values.length) {
      x = data[i].Values[j].Time;
      y = data[i].Values[j].Value;
      seriesData[i].push([x, y]);
      j++;
    }
    i++;
  }
  return $("#criticalWPtrend").highcharts({
    chart: {
      type: "line"
    },
    area: {
      height: "100%",
      width: "100%",
      margin: {
        top: 20,
        right: 30,
        bottom: 30,
        left: 50
      }
    },
    title: {
      text: ""
    },
    subtitle: {
      text: ""
    },
    legend: {
      layout: "vertical",
      verticalAlign: "right",
      align: "right",
      borderWidth: 0
    },
    xAxis: {
      type: 'datetime',
      dateTimeLabelFormats: {
        day: '%m-%d'
      },
      tickInterval: 24 * 3600 * 1000
    },
    yAxis: {
      title: {
        text: 'Value'
      },
      lineWidth: 1,
      min: 0,
      minorGridLineWidth: 0,
      gridLineWidth: 0,
      alternateGridColor: null
    },
    tooltip: {
      valueSuffix: " "
    },
    plotOptions: {
      series: {
        marker: {
          enabled: false
        },
        stickyTracking: {
          enabled: false
        }
      },
      line: {
        lineWidth: 2,
        states: {
          hover: {
            lineWidth: 3
          }
        },
        marker: {
          enabled: false
        }
      }
    },
    series: [
      {
        name: data[0].Name,
        data: seriesData[0]
      }, {
        name: data[1].Name,
        data: seriesData[1]
      }, {
        name: data[2].Name,
        data: seriesData[2]
      }, {
        name: data[3].Name,
        data: seriesData[3]
      }, {
        name: data[4].Name,
        data: seriesData[4]
      }, {
        name: data[5].Name,
        data: seriesData[5]
      }
    ],
    navigation: {
      menuItemStyle: {
        fontSize: "10px"
      }
    }
  });
});        

是的,这在renderer方法中是可能的。请参阅此基本示例。

chart.renderer.text('10.02.2013', 0, 300)
            .attr({
                rotation: 0
            })
            .css({
                color: '#4572A7',
                fontSize: '16px'
            })
            .add();

您需要注意x/y位置(其他两个参数)才能正确放置它。您也可以修改文本样式。

我不确定,但我认为您只需要通过更新方法来更新您的xAxis

this.xAxis[0].update({
    title: {
        text: "start-date = '10.02.2013'  end-date = '10.05.2013'",
        style: {
            fontSize: '10px'
        }
    }
});

以下是示例:http://jsfiddle.net/FEwKX/

但是如果您的意思是开始和结束日期需要绑定到边缘,则必须在配置中指定xAxis设置

xAxis: {
    categories: categoriesArray 
}

其中categoriesArray是这样的数组:

['10.02.2013', '', '', '', '', '', '', '', '', '', '', '10.05.2013']

它应该与序列数据的长度相同。点击此处查看:http://jsfiddle.net/FEwKX/1/

希望这对你有帮助。

您还可以使用labelFormatter和http://api.highcharts.com/highcharts#xAxis.labels.formatter并检查标签是否为isFirst或isLast,然后使用您的日期,在其他情况下返回正确的值(如数字)。