Come creare un grafico a linee colonna personalizzato con valori personalizzati e etichette degli assi in javascript?

Question

Mi chiedevo se potevo usare qualche libreria javascript come highcharts, google charts, amcharts o d3js per creare un grafico come il seguente:

Come si può vedere nell'immagine, la parte superiore ha un riassunto dei 3 valori tracciati in ogni colonna, quindi è necessario avere un'etichetta dell'asse personalizzata nella parte superiore in cui tutte le informazioni possono essere presentate.

E ogni valore tracciato ha anche una casella rettangolare con il valore (che è il suo prezzo), il suo nome e Segmento a cui appartiene.

Answer 1

È possibile creare questo grafico utilizzando ZingChart. Here's my rendition of your chart. Assicurati di fare clic sulla scheda JavaScript per vedere il grafico JSON e come viene reso. Inoltre, nella scheda HTML, prendi nota che ZingChart ha un CDN disponibile, quindi è facile iniziare con la libreria. Per renderlo ancora più semplice, puoi fare clic sul pulsante JSFiddle in alto a destra per copiare tutto su JSFiddle in modo da poter iniziare a giocare con il grafico da solo.

A causa della complessità di questo grafico, ho dovuto suddividere questo numero in un numero di oggetti graphset. Il primo oggetto crea il titolo e sottotitolo:

{ 
    "type":null, 
    "x":0, 
    "y":0, 
    "height":36, 
    "width":"100%", 
    "background-color":"none", 
    "title":{ 
    "text":"Prices for Camera Segment", 
    "height":20, 
    "background-color":"#000661" 
    }, 
    "subtitle":{ 
    "text":"Cameras", 
    "background-color":"#234979", 
    "color":"white", 
    "y":20, 
    "height":16 
    } 
} 

l'oggetto successivo graphset crea riga colonna intestazioni, così come l'etichetta della riga "PREZZI":

{ 
    "type":"grid", 
    "x":0, 
    "y":36, 
    "height":100, 
    "width":"100%", 
    "background-color":"none", 
    "options":{ 
     "header-row":false, 
     "col-widths":["10%","22.5%","22.5%","22.5%","22.5%"], 
     "style":{ 
      ".tr":{ 
       "height":20, 
       "align":"center" 
      }, 
      ".td_1_0":{ 
       "height":60 
      } 
     } 
    }, 
    "series":[ 
     { 
      "values":[ 
       "Price (SAR)", 
       "Konica", 
       "Nikon", 
       "Canon", 
       "Konica" 
      ] 
     }, 
     { 
      "values":["PRICES"] 
     } 
    ] 
} 

l'oggetto successivo crea la griglia con le informazioni sulla telecamera, posta e dimensionata con x, y, height e width attributi in modo che si sovrapponga griglia precedente, lasciando solo "prezzi" label riga visibile:

{ 
    "type":"grid", 
    "x":"10%", 
    "y":56, 
    "height":60, 
    "width":"90%", 
    "background-color":"none", 
    "options":{ 
    "header-row":false, 
    "col-widths":[ 
     "7%","11%","7%", 
     "7%","11%","7%", 
     "7%","11%","7%", 
     "7%","11%","7%" 
    ], 
    "style":{ 
     ".td_1_0":{ 
     "height":20 
     } 
    } 
    }, 
    "series":[ 
    { 
     "values":[ 
     "USER", 
     "KM1", 
     "NA", 
     "USER", 
     "COOLPIX", 
     "200", 
     "USER", 
     "CM1", 
     "250", 
     "USER", 
     "KM1", 
     "150" 
     ]  
    }, 
    { 
     "values":[ 
     "ENTRY", 
     "KM2", 
     "NA", 
     "ENTRY", 
     "D300", 
     "400", 
     "ENTRY", 
     "CM2", 
     "450", 
     "ENTRY", 
     "KM2", 
     "350" 
     ] 
    }, 
    { 
     "values":[ 
     "PRO", 
     "KM3", 
     "NA", 
     "PRO", 
     "D1", 
     "1,200", 
     "PRO", 
     "CM3", 
     "1,250", 
     "PRO", 
     "KM3", 
     "1,150" 
     ] 
    } 
    ] 
} 

Infine, il grafico è di per sé un grafico a linea con i marcatori in modo appropriato stile e di dimensioni:

{ 
    "type":"line", 
    "x":0, 
    "y":116, 
    "height":484, 
    "width":"100%", 
    "background-color":"white", 
    "plotarea":{ 
    "margin-top":20, 
    "margin-left":"10%", 
    "margin-right":0 
    }, 
    "plot":{ 
    "value-box":{ 
     "color":"black", 
     "text":"%data-level<br>%data-camera<br>%v", 
     "placement":"middle", 
     "font-weight":"none" 
    }, 
    "marker":{ 
     "type":"rectangle", 
     "height":40, 
     "width":120, 
     "background-color":"white", 
     "border-with":2, 
     "border-color":"black", 
     "line-style":"dotted" 
    }, 
    "hover-marker":{ 
     "visible":false 
    }, 
    "hover-state":{ 
     "visible":false 
    }, 
    "tooltip":{ 
     "visible":false 
    }, 
    "line-color":"black", 
    "line-style":"dashed", 
    "line-width":2 
    }, 
    "scale-y":{ 
    "guide":{ 
     "visible":false 
    }, 
    "label":{ 
     "text":"Price" 
    } 
    }, 
    "scale-x":{ 
    "markers":[ 
     { 
     "type":"line", 
     "range":[0.5], 
     "line-width":2, 
     "line-color":"#F2F2F2" 
     }, 
     { 
     "type":"line", 
     "range":[1.5], 
     "line-width":2, 
     "line-color":"#F2F2F2" 
     }, 
     { 
     "type":"line", 
     "range":[2.5], 
     "line-width":2, 
     "line-color":"#F2F2F2" 
     } 
    ], 
    "labels":["Konica", "Nikon","Canon","Konica"], 
    "guide":{ 
     "visible":false 
    }, 
    "offset-start":90, 
    "offset-end":90 
    }, 
    "series":[ 
    { 
     "values":[null, 200, 250, 150], 
     "data-level":"USER", 
     "data-camera":[null,"COOLPIX", "CM1", "KM1"] 
    }, 
    { 
     "values":[null, 400, 450, 350], 
     "data-level":"ENTRY", 
     "data-camera":[null, "D300","CM2","KM2"] 
    }, 
    { 
     "values":[null, 1200, 1250, 1150], 
     "data-level":"PRO", 
     "data-camera":[null, "D1","CM3","KM3"] 
    } 
    ] 
} 

Ora, il fair play, sono sulla squadra ZingChart e sono stato la creazione di grafici con la libreria per un po. Tuttavia, gli attributi di stile per ZingChart sono molto simili a CSS, quindi se hai familiarità con gli attributi CSS, hai già un vantaggio. Dai un'occhiata al nostro http://www.zingchart.com/docs e fammi sapere se hai qualche domanda.