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

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

然而，在第一眼看到你的身影时，我的脑海中出现了以下想法和角度框架。

您可以使用基本的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/

使用highchart.js绘制图表

2 个答案: