Question

我想做这样的事情：http://tutsnare.com/onclick-open-new-chart-highcharts/点击图表我得到详细信息显示在另一个蜘蛛网图表中但是当我在链接蜘蛛网图表中尝试了这个例子时它没有任何帮助请？

这是我的代码：

$scope.configChart = {
  options: {
    chart: {
      polar: true,
      type: 'line'
    }
  },

  title: {
    text: 'Dimensions result',
    x: -80
  },

  pane: {
    size: '80%'
  },

  xAxis: {
    categories: [],
    tickmarkPlacement: 'on',
    lineWidth: 0
  },

  yAxis: {
    gridLineInterpolation: 'polygon',
    lineWidth: 0,
    min: 0
  },

  tooltip: {
    shared: true,
    pointFormat: '<span style="color:{series.color}">{series.name}: <b>${point.y:,.0f}</b><br/>'
  },

  legend: {
    align: 'right',
    verticalAlign: 'top',
    y: 70,
    layout: 'vertical'
  },

  series: [{
    name: 'Average',
    data: [],
  }]

};

html：

<highchart id="container" config="configChart" style="min-width: 400px; max-width: 600px; height: 400px; margin: 0 auto"></highchart>

::: UPDATE :::

Answer 1

TL; DR

这是一个现场演示 - http://jsfiddle.net/vu96fr9h/2/

首先，您的series不包含数据。对于这个例子，我用以下内容初始化它：

series: [{
  name: 'Average',
  data: [{
    id: "point-1",
    x: 1,
    y: 49.9
  }, {

    id: "point-2",
    x: 2,
    y: 71.5
  }, {

...

接下来，您可以通过扩展chartConfig对象来设置点上的点击事件，如下所示：

options: {
      plotOptions: {
        series: {
          cursor: 'pointer',
          point: {
            events: {
              click: function(e) {
                var point = {
                  x: this.x,
                  y: this.y,
                  id: this.id
                }

                $scope.$apply(function() {
                  $scope.selectedPoint = point;
                });
              }
            }
          },
          marker: {
            lineWidth: 1
          }
        }
      },

      ...

点击会将点元数据存储在$scope.selectedPoint中。您可以添加$scope.$watch以在更改时收到通知：

$scope.$watch('selectedPoint', function(newValue) {

    // Here you can fetch more info about this point from the server 
    console.log(newValue);

});

视图将根据$scope.selectedPoint显示您想要的内容。它可以是辅助图形或普通元数据作为文本。

onclick on spiderweb chart打开新的细节

1 个答案:

TL; DR