Question

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

如何在我的xAxis中将开始日期和结束日期字符串变量用作标签？ start-date = '10 .02.2013' 结束日期= '10 .05.2013'

附上代码和图表图像。我唯一需要做的就是添加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"
      }
    }
  });
});

Answer 1

是的，使用renderer方法可以实现这一点。请参阅this基本示例。

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

您需要注意x / y位置（其他2个参数）才能正确放置。您还可以修改文本样式。

Answer 2

我不确定，但我认为您只需要通过update method更新您的xAxis

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

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

但是！ 如果您的意思是开始日期和结束日期需要绑定到边缘，则必须在config

中指定xAxis设置

xAxis: {
    categories: categoriesArray 
}

其中categoriesArray是这样的数组：

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

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

希望能帮到你。

Answer 3

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

在高图中将开始日期和结束日期添加为Xaxis标签

3 个答案: