如何在javascript中創建具有自定義值和軸標籤的自定義列折線圖？

Question

我在想，如果我可以使用一些JavaScript庫，例如highcharts，google charts，amcharts或d3js創建類似如下的圖表：

正如你可以在圖片中看到，頂部有一個每列中繪製的3個值的總結，因此需要在頂部可以顯示所有這些信息的自定義軸標籤。

並繪製每個值也有一個矩形框與價值（這是它的價格），它的名稱和它所屬的段。

Answer 1

您當然可以使用ZingChart創建此圖表。 Here's my rendition of your chart。一定要點擊JavaScript標籤查看圖表JSON，以及它是如何呈現的。另外，在HTML選項卡上，請注意ZingChart有一個CDN可用，因此很容易開始使用該庫。爲了更容易，您可以點擊右上角的JSFiddle按鈕將所有內容複製到JSFiddle，以便您可以自己開始播放圖表。

由於此圖表的複雜性，我不得不將其分解爲多個graphset對象。第一個對象創建的標題和副標題：

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

在graphset下一個對象創建的列標題行，以及在「價格」行標籤：

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

下一個對象創建網格與攝像頭的信息，放置並與x，y，height大小和width屬性，使其重疊以前的網格，只留下了「價格」行標籤可見：

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

最後，圖表本身是適當的風格和尺寸的標記線圖：

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

現在，公平競爭，我對ZingChart和我的團隊已經建立的圖表與庫一會兒。但是，ZingChart的樣式屬性非常類似於CSS，所以如果您熟悉CSS屬性，那麼您已經有了一個良好的開端。查看我們的http://www.zingchart.com/docs，如果您有任何疑問，請告訴我們。