highcharts.js自定義圖表實現

Question

我需要實現這樣簡單的圖表使用JS http://i.stack.imgur.com/6gusX.png 我回顧了highcharts.js lib，但我找不到現成的解決方案或相似的圖表。 如果有人知道可以幫助實施它的工具，請幫助。

Answer 1

它可以使用Highcharts完成。

以格式標記使用以下代碼。

plotOptions: { 
    // means all series types, you can change it according to the serie type 
    series: { 
     marker: { 
      radius: 8, 
      fillColor: '#FFFFFF', 
      lineWidth: 2, 
      lineColor: null 
     } 
    } 
} 

demo reference

然後到添加該標記內的點值。作爲示例，我將使用前面的代碼。
默認情況下，dataLabels已禁用，因此您必須enable然後將其設置爲y的位置。

plotOptions: { 
    // means all series types, you can change it according to the serie type 
    series: { 
     marker: { 
      radius: 12, 
      fillColor: '#FFFFFF', 
      lineWidth: 2, 
      lineColor: null 
     }, 
     dataLabels: { 
      enabled: true, 
      y: 13, 
      // default formatter 
      formatter: function() { 
       return this.y; 
      } 
     } 
    } 
} 

我改變半徑值，因爲它太小，放了數裏面，你可以使用formatter格式化它的數量。
demo

然後，你必須風格xAxys標籤。

xAxis: { 
    labels: { 
     style: { 
      color: 'orange', 
      fontWeight: 'bold', 
      'font-size': '20px' 
     } 
    } 
} 

而且here是結果。
當然這並不完美。但它可以，我只是想告訴你，這是它可以使用Highcharts做到這一點，你有一個很多選項和一個很好的reference可以幫助你。