使用highchart.js繪製圖表

Question

我對數據可視化非常陌生。 目前，我們有一個要求類似的圖表繪製使用HighChart.js

見下面的jsfiddle：http://jsfiddle.net/rgpz2ru5/22/什麼我試過至今。 我已成功繪製圖表，但在繪製數據標籤和點之間的線條時遇到了問題（如上圖所示）？ 你能幫忙嗎？

請參見下面的代碼繪製的圖表：

$('#container').highcharts({ 
    chart: { 
     type: 'scatter', 
    }, 
    xAxis: { 
     visible: false 
    }, 
    yAxis: { 
     title: { 
     text: '' 
     }, 
     labels: { 
     formatter: function() { 
      return null 
     } 
     } 
    }, 
    plotOptions: { 
     series: { 
     dataLabels: { 
      enabled: true, 
      inside: false, 
      formatter: function(){ 
      console.log("X"+this.x) 
      console.log("this.x%2"+this.x%2) 
      if(this.x%2 == 0){ 
      console.log("in if") 
      return "<div style='position: relative;height:70px; border-left:solid thin #ff0000;margin-left:10px'><span style='position: absolute;bottom: 0;right: 0;'>hello</span></div>"; 
      }else{ 
      console.log("in else") 
      return "<span style='color:black'>"+this.key+"</span><div style='height:70px; border-left:solid thin #ff0000;margin-left:10px'/>"; 
      } 
      }, 
      useHTML:true 

     } 
     },scatter: { 
       marker: { 
        radius: 5, 
        states: { 
         hover: { 
          enabled: false, 
          lineColor: "#ffb74d" 
         } 
        } 
       }, 
       states: { 
        hover: { 
         marker: { 
          enabled: false 
         } 
        } 
       }, 
       tooltip: { 
        headerFormat: '<b>{series.name}</b><br>', 
        pointFormat: '{point.x} cm, {point.y} kg' 
       } 
      } 
    }, 

    series: [{ 
     data: [{ 
     x: 1, 
     y: 1, 
     dataLabels: { 
      y: -80 

     }, 
     marker: { 
      radius: 3 
     }, 
     name: 'SDS', 
     color: "#ffb74d" 
     }, { 
     x: 2, 
     y: 1, 
     dataLabels: { 
      y: 80 
     }, 
     marker: { 
      radius: 5 
     }, 
     name: 'MIP', 
     color:"#ffe0b2" 
     }, { 
     x: 3, 
     y: 1, 
     dataLabels: { 
      y: -80, 
      distance : 50, 
        softConnector : false, 
        connectorColor : '#D0D0D0', 
     }, 
     marker: { 
      radius: 7 
     }, 
     name: 'MDP', 
     color:"#ff9800" 
     },{ 
     x: 4, 
     y: 1, 
     dataLabels: { 
      y: 80 
     }, 
     marker: { 
      radius: 9 
     }, 
     name: 'RAD', 
     color:"#ffb74d" 
     },{ 
     x: 5, 
     y: 1, 
     dataLabels: { 
      y: -80 
     }, 
     marker: { 
      radius: 3 
     }, 
     name: 'SDS', 
     color: "#ffb74d" 
     }, { 
     x: 6, 
     y: 1, 
     dataLabels: { 
      y: 80 
     }, 
     marker: { 
      radius: 5 
     }, 
     name: 'MIP', 
     color:"#ffe0b2" 
     }, { 
     x: 7, 
     y: 1, 
     dataLabels: { 
      y: -80 
     }, 
     marker: { 
      radius: 7 
     }, 
     name: 'MDP', 
     color:"#ff9800" 
     },{ 
     x: 8, 
     y: 1, 
     dataLabels: { 
      y: 80 
     }, 
     marker: { 
      radius: 9 
     }, 
     name: 'RAD', 
     color:"#ffb74d" 
     },{ 
     x: 9, 
     y: 1, 
     dataLabels: { 
      y: -80 
     }, 
     marker: { 
      radius: 3 
     }, 
     name: 'SDS', 
     color: "#ffb74d" 
     }, { 
     x: 10, 
     y: 1, 
     dataLabels: { 
      y: 80 
     }, 
     marker: { 
      radius: 5 
     }, 
     name: 'MIP', 
     color:"#ffe0b2" 
     }, { 
     x: 11, 
     y: 1, 
     dataLabels: { 
      y: -80 
     }, 
     marker: { 
      radius: 7 
     }, 
     name: 'MDP', 
     color:"#ff9800" 
     },{ 
     x: 12, 
     y: 1, 
     dataLabels: { 
      y: 80 
     }, 
     marker: { 
      radius: 9 
     }, 
     name: 'RAD', 
     color:"#ffb74d" 
     }] 
    }] 

    }); 

能否請你幫忙嗎？

Answer 1

作出類似的圖表，你可以使用氣泡圖：http://jsfiddle.net/rgpz2ru5/

或標準散點圖：http://jsfiddle.net/rgpz2ru5/1/

可以使用marker.radius參數改變分散的標記大小：

marker: { 
     radius: 5, 
     states: { 
     hover: { 
      lineColor: "#ffb74d" 
     } 
     } 
    }, 

你可以使用chart.renderer.path和chart.renderer添加標籤。標籤： http://api.highcharts.com/highcharts/Renderer.path http://api.highcharts.com/highcharts/Renderer.label

var drawLabels = function(chart) { 
    $('.cLabels').remove(); 
    var series = chart.series, 
     renderer = chart.renderer, 
     plotTop = chart.plotTop, 
     plotLeft = chart.plotLeft; 
    Highcharts.each(series, function(s) { 
     Highcharts.each(s.data, function(p) { 
     renderer.path(['M', p.plotX + plotLeft, p.plotY + plotTop, 'L', p.plotX + plotLeft, p.plotY + plotTop - 30]).attr({ 
      stroke: 'black', 
      'stroke-width': 1 
     }).addClass('cLabels').add(); 
     renderer.label(p.name, p.plotX + plotLeft, p.plotY + plotTop - 50).attr({ 
      'text-anchor': 'middle', 
      padding: 0 
     }).addClass('cLabels').add(); 
     }); 
    }); 
    } 

在這裏你可以看到一個例子是如何工作的：你正在使用的角度爲這個http://jsfiddle.net/rgpz2ru5/29/

Answer 2

您的圖表似乎屬於特定種類。我個人從未見過任何這樣的可視化。此外，曾與HighCharts合作，我懷疑是否可以將高圖表的任何type轉換爲您的圖表。

但是，首先看看你的身材，下面的想法出現在我的腦海裏，角度框架。

您可以使用基本的html和css來實現這種可視化。

假設您瞭解Angular術語。我建議有一個你所有的價值清單。環路他們在一個簡單的div如下：

<div ng-repeat = "c in pointsList" > </div> 

接下來，您可以使用ng-style或ng-class動態CSS添加到您的每一個DIV。

看到你的身影，我以爲你只以下CSS屬性： 1. border-radius 2. background-color 3. width 4. height

好像你已經訂好每種類型的氣泡類別。所以你可以在你的css中創建幾個固定的類，並根據你的類型點動態地應用它們。基本上，它看起來像：

<div ng-repeat = "c in pointsList" ng-class = "{'css1' : c.type1, 'css2' : c.type2}" > </div> 

伴隨着這一點，你將需要申請display: inline-block把所有divs在一條線上。

我知道，它太天真的解決方案，但如果您對這種圖表的要求有限，這可以幫助您實現最小的調整。