使用highchart.js绘制图表

Question

我对数据可视化非常陌生。 当前，我们需要使用HighChart.js绘制类似于以下的图表

请参阅jsfiddle： http : //jsfiddle.net/rgpz2ru5/22/了解我到目前为止的尝试。 我能够成功绘制图表，但在datalabel和point之间绘制线时遇到问题（如上图所示）？ 你能帮忙吗？

参见下面的代码绘制图表：

 $('#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

您的图表似乎属于特定种类。 我个人之前从未见过任何此类可视化。 另外，在与HighCharts合作之后，我怀疑是否可以将任何type的highchart转换为您自己的。

但是，在您的图形上初看时，以下想法在我的脑海中出现了。

您可以使用基本的html和css实现这种可视化。

假设您了解Angular术语。 我建议您列出所有价值观。 将它们循环到一个简单的div中，如下所示：

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

接下来，您可以使用ng-style或ng-class向每个div添加动态CSS。

看到您的图，我假设您仅遵循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排成一行。

我知道，它的解决方案太幼稚，但是如果您对此类图表的要求有限，则可以通过最少的调整来帮助您实现。

Answer 2

要制作类似的图表，您可以使用气泡图： http : //jsfiddle.net/rgpz2ru5/

或标准散点图： http : //jsfiddle.net/rgpz2ru5/1/

您可以使用marker.radius参数更改散布的标记大小：

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

您可以使用chart.renderer.path和chart.renderer.label添加标签： 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/