使用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在一条线上。

我知道，它太天真的解决方案，但如果您对这种图表的要求有限，这可以帮助您实现最小的调整。