Javascript 使用highchart.js绘制图表

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

请参阅jsfiddle：了解到目前为止我所做的尝试。 我能够成功地绘制图表，但在绘制datalabel和点之间的线时面临问题（如上图所示）？ 你能帮忙吗

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

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

  }); 

$（“#容器”）。高图({
图表：{
键入：“散布”，
},
xAxis：{
可见：假
},
亚克斯：{
标题：{
文本：“”
},
标签：{
格式化程序：函数（）{
返回空
}
}
},
打印选项：{
系列：{
数据标签：{
启用：对，
里面:假,，
格式化程序：函数（）{
console.log（“X”+this.X）
console.log（“this.x%2”+this.x%2）
如果（此.x%2==0）{
console.log（“如果需要，请登录”）
回复“你好”；
}否则{
console.log（“在其他地方”）
返回“+this.key+”；
}
},
useHTML:true
}
}，散布：{
标记：{
半径：5，
国家：{
悬停：{
启用：false，
线条颜色：“ffb74d”
}
}
},
国家：{
悬停：{
标记：{
已启用：false
}
}
},
工具提示：{
headerFormat:“{series.name}
”，
pointFormat:“{point.x}cm，{point.y}kg”
}
}
},
系列：[{
数据：[{
x:1，
y:1,，
数据标签：{
y:-80
},
标记：{
半径：3
},
名称：“SDS”，
颜色：“ffb74d”
}, {
x:2，
y:1,，
数据标签：{
y:80
},
标记：{
半径：5
},
名称：'MIP'，
颜色：“ffe0b2”
}, {
x:3，
y:1,，
数据标签：{
y:-80，
距离：50，
软连接器：错误，
接头颜色：'#D0'，
},
标记：{
半径：7
},
名称：“MDP”，
颜色：“ff9800”
},{
x:4，
y:1,，
数据标签：{
y:80
},
标记：{
半径：9
},
名称：'RAD'，
颜色：“ffb74d”
},{
x:5，
y:1,，
数据标签：{
y:-80
},
标记：{
半径：3
},
名称：“SDS”，
颜色：“ffb74d”
}, {
x:6，
y:1,，
数据标签：{
y:80
},
标记：{
半径：5
},
名称：'MIP'，
颜色：“ffe0b2”
}, {
x:7，
y:1,，
数据标签：{
y:-80
},
标记：{
半径：7
},
名称：“MDP”，
颜色：“ff9800”
},{
x:8，
y:1,，
数据标签：{
y:80
},
标记：{
半径：9
},
名称：'RAD'，
颜色：“ffb74d”
},{
x:9，
y:1,，
数据标签：{
y:-80
},
标记：{
半径：3
},
名称：“SDS”，
颜色：“ffb74d”
}, {
x:10，
y:1,，
数据标签：{
y:80
},
标记：{
半径：5
},
名称：'MIP'，
颜色：“ffe0b2”
}, {
x:11,，
y:1,，
数据标签：{
y:-80
},
标记：{
半径：7
},
名称：“MDP”，
颜色：“ff9800”
},{
x:12，
y:1,，
数据标签：{
y:80
},
标记：{
半径：9
},
名称：'RAD'，
颜色：“ffb74d”
}]
}]
}); 

---

你能帮忙吗？

你的图表似乎是一种特殊的图表。我个人以前从未见过任何这样的可视化。此外，在使用highchart之后，我怀疑highchart的

类型是否可以转换为您的类型

然而，当我第一次看到你的身影时，我的脑海中出现了以下想法：角度框架

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

假设你知道角度术语。我建议列出你所有的价值观。在一个简单的div中循环它们，如下所示：

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

除此之外，您还需要应用
display:inline block
将所有
div
放在一行中

我知道，这是一个太幼稚的解决方案，但如果您对此类图表的要求有限，这可以帮助您通过最小的调整来实现它。
要制作类似的图表，您可以使用气泡图：

或标准散点图：

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

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

您可以使用chart.renderer.path和chart.renderer.label添加标签：

在这里，您可以看到一个示例，它是如何工作的：
您有没有可能使用angular进行此操作？是的，我们使用的是一个规则和bootstrap.css，对我来说就像一个气泡图，还有一个附加限制，即y值是常量（假设为零）。当然，您必须为标签编写自己的逻辑，以便像这样对标签进行偏移，但HC为此提供回调，您可以使用CSS设置图表组件的样式。这可能是一个起点：。如果用HC做起来太麻烦，而你只需要一张图表，那么从头开始写或者用d3.js这样的可视化库可能会更快
    marker: {
      radius: 5,
      states: {
        hover: {
          lineColor: "#ffb74d"
        }
      }
    },

  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();
      });
    });
  }