在高圖中將開始日期和結束日期添加爲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，然後使用您的日期，在其他情況下返回適當的值（如數字）。