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'] 
      } 
    }); 
}); 

На оси х 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/

Навигатор по оси еще даты и времени, хотя. Но я думаю, что высмеивать ось datetime, чтобы посмотреть, как эта категория достижима.

Возможно, вы можете реализовать схему мастер-детали. 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]} 
      } 
     } 
    }); 
});