HighStocks需要顯示類別而不是日期

Question

我想使用HighCharts，因爲有縮放功能！一切都很好。有一兩件事我想這不同，但我似乎無法得到它的工作...我的代碼：

http://jsfiddle.net/ma50685a/16/

$(function() { 
     // Create the chart 
     window.chart = new Highcharts.StockChart({ 
      chart: { 
       renderTo: 'container', 
       type: 'column' 
      }, 
      rangeSelector: { 
       enabled: false 
      }, 
      navigator: { 
       series: { 
        type: 'column' 
       } 
      }, 
      title: { 
       text: 'Overview of veggies' 
      }, 
      plotOptions: { 
       column: { 
        stacking: 'normal' 
       } 
      }, 
      series: [{ 
       name: 'Sarah', 
       data: [2,2,3,0,8] 
      }, { 
       name: 'Ben', 
       data: [6,0,0,13,2] 
      }, { 
       name: 'Kiki', 
       data: [3,5,1,16,3] 
      }, { 
       name: 'Anna', 
       data: [0,5,1,3,2] 
      }], 
      credits: { 
       enabled: false 
      }, 
      xAxis: { 
       categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'] 
      } 
    }); 
}); 

在x軸I想要顯示類別！這是可能的，因爲現在它顯示日期？

Answer 1

正如提到的，stockchart可與日期時間軸，但你可以用一個正常的圖表與導航啓用。

window.chart = new Highcharts.Chart({ 
    chart: { 
     renderTo: 'container', 
     type: 'column' 
    }, 
    rangeSelector: { 
     enabled: false 
    }, 
    navigator: { 
      enabled: true, 
     series: { 
      type: 'column' 
     } 
    }, 

例如：http://jsfiddle.net/ma50685a/26/

導航軸是靜止的日期時間，雖然。但我認爲嘲笑日期時間軸看起來可以實現。

（可選）您可以實施主 - 明細表。 http://www.highcharts.com/demo/dynamic-master-detail

Answer 2

不是很優雅，但我認爲這是你想要的東西：

http://jsfiddle.net/ma50685a/23/

$(function() { 
    // Create the chart 
    var categoriesCptChart = 0; 
    var categoriesCptStock = 0; 
    var categories = ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']; 
    window.chart = new Highcharts.StockChart({ 
     chart: { 
      renderTo: 'container', 
      type: 'column' 
     }, 
     rangeSelector: { 
      enabled: false 
     }, 
     navigator: { 
      series: { 
       type: 'column' 
      }, 
      xAxis: { 
       labels: { 
         formatter: function() { return categories[categoriesCptStock++ % categories.length]} 
       } 
      } 
     }, 
     title: { 
      text: 'Overview of veggies' 
     }, 
     plotOptions: { 
      column: { 
       stacking: 'normal' 
      } 
     }, 
     series: [{ 
      name: 'Sarah', 
      data: [2,2,3,0,8] 
     }, { 
      name: 'Ben', 
      data: [6,0,0,13,2] 
     }, { 
      name: 'Kiki', 
      data: [3,5,1,16,3] 
     }, { 
      name: 'Anna', 
      data: [0,5,1,3,2] 
     }], 
     credits: { 
      enabled: false 
     }, 
     xAxis: { 
      labels: { 
       formatter: function() { return categories[categoriesCptChart++ % categories.length]} 
      } 
     } 
    }); 
});