HighStocks muss Kategorien anstelle von Datum anzeigen

Question

Ich möchte HighCharts wegen der Zoomfunktion verwenden! Alles funktioniert super. Es gibt eine Sache, die ich anders möchte, aber ich kann nicht scheinen, es ... Mein Code zu arbeiten:

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

Auf der x-Achse I möchte die Kategorien anzeigen! Ist das möglich, weil es jetzt Datum zeigt?

Answer 1

Wie bereits erwähnt wurde, ein stockchart arbeitet mit Datetime-Achse, aber Sie können ein normales Diagramm verwenden, um mit einem Navigator aktiviert .

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

Beispiel: http://jsfiddle.net/ma50685a/26/

Navigator Achse Date noch, though. Aber ich denke, die Datetime-Achse zu verspotten, um zu sehen, wie die Kategorie erreichbar ist.

Optional können Sie ein Master-Detail-Diagramm implementieren. http://www.highcharts.com/demo/dynamic-master-detail

Answer 2

Nicht sehr elegant, aber ich denke, das ist, was Sie wollen:

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