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

Question

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

如何将我的开始日期和结束日期字符串变量用作xAxis中的标签？ start-date = '10 .02.2013' end-date = '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

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

更新您的x轴下面是例子：http://jsfiddle.net/FEwKX/

但是！ 如果你的意思是开始和结束日期需要绑在边缘，必须指定配置X轴设置

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并检查标签是否为first或isLast，然后使用您的日期，在其他情况下返回适当的值（如数字）。