Jak utworzyć niestandardowy wykres liniowy kolumn z niestandardowymi etykietami wartości i osi w javascript?

Question

Zastanawiałem się, czy mogę korzystać z niektórych javascript biblioteki jak highcharts, google charts, amcharts lub d3js utworzyć wykres jak następuje:

Jak widać na zdjęciu, górna część ma podsumowanie 3 wartości wykreślonych w każdej kolumnie, więc musi mieć niestandardową etykietę osi u góry, gdzie można wyświetlić wszystkie te informacje.

Każda z wykrytych wartości ma również prostokątne pudełko z wartością (która jest jego ceną), jej nazwą i segmentem, do którego należy.

Answer 1

Z pewnością można utworzyć ten wykres za pomocą ZingChart. Here's my rendition of your chart. Koniecznie kliknij kartę JavaScript, aby wyświetlić wykres JSON i sposób jego renderowania. Ponadto, na karcie HTML, zauważ, że ZingChart ma dostępną CDN, więc łatwo jest rozpocząć korzystanie z biblioteki. Aby było jeszcze łatwiej, możesz kliknąć przycisk JSFiddle w prawym górnym rogu, aby skopiować wszystko do JSFiddle, abyś mógł sam rozpocząć zabawę z mapą.

Z powodu złożoności tego wykresu, musiałem przerwać to na kilka obiektów graphset. Pierwszy przedmiot tworzy tytuł i napisy:

{ 
    "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 
    } 
} 

Kolejny przedmiot w graphset tworzy rzędowych kolumny, jak również „ceny” etykiety rzędu:

{ 
    "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"] 
     } 
    ] 
} 

Kolejnym przedmiotem tworzy siatkę z informacjami kamery, umieszczone i wielkości z x, y, height i width atrybuty tak, że pokrywa się z poprzednią siatkę, pozostawiając tylko „ceny” etykietę wiersza visible:

{ 
    "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" 
     ] 
    } 
    ] 
} 

Wreszcie, sam wykres to wykres liniowy ze znacznikami odpowiednio stylu i rozmiarze:

{ 
    "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"] 
    } 
    ] 
} 

Teraz, fair play, jestem w zespole ZingChart a ja buduje wykresy z biblioteką dla chwila. Jednak atrybuty stylu dla ZingChart są bardzo podobne do CSS, więc jeśli znasz atrybuty CSS, masz już przewagę. Sprawdź nasze http://www.zingchart.com/docs i daj mi znać, jeśli masz jakieś pytania.