ハイチャートはシンボルを動的に割り当てます

Question

元のデータの値に基づいてハイチャートを使用して作成した散布図のポイントにシンボルを動的に割り当てようとしています。以下のサンプルデータでは、シンボルとその値（三角、円、四角）というキーがあります。この値を "marker：{symbol：}"にどのように割り当てることができますか？ サンプルデータです。

[{"x":0.38,"y":0.55,"date":"03-09-2017","num1":32,"num2":0,"symbol_num":1,"symbol":"triangle"},{"x":0.52,"y":0.66,"date":"03-09-2017","num1":31,"num2":0,"symbol_num":1,"symbol":"triangle"},{"x":0.38,"y":0.42,"date":"03-09-2017","num1":33,"num2":0,"symbol_num":1,"symbol":"triangle"},{"x":0.29,"y":0.39,"date":"03-21-2017","num1":32,"num2":0,"symbol_num":1,"symbol":"triangle"},{"x":0.5,"y":0.56,"date":"03-21-2017","num1":31,"num2":0,"symbol_num":1,"symbol":"triangle"},{"x":0.04,"y":0.15,"date":"03-21-2017","num1":33,"num2":0,"symbol_num":1,"symbol":"triangle"}] 

ここにコード全体があります。

function Multitest(resp, parentNode) { 
var tmp = resp.SCData; 
resp.max_std = 1.25 
if (FilteredSimNum.length > 0) { // check to see if the data in the data table is filtered 
    //use the filtered sim number as index of ids variable ,to fill it with true or false 
    var ids = {}; 
    _.each(FilteredSimNum, function(bb) { 
     ids[bb] = true; 
    }); 
    // return data where ids is true 
    tmp = _.filter(tmp, function(val) { 
     return ids[val.num1]; 
    }, FilteredSimNum); 
} // end of if(FilteredSimNum.length>0) 
var colorRange = ["#bf00ff", "#0080ff", "#25b629", "#ffbf00"]; 

//find unique large scale forcing (LSF) and assign colors 
var unqDate = []; 
for (i = 0; i < tmp.length; i++) { 
    if (unqDate.indexOf(tmp[i].date) === -1) { 
     unqDate.push(tmp[i].date); 
    } 
} 

var ulLen = unqDate.length; // Large sacle forcing length 

//Legend message and color assignment 
if (resp.SCData.length < 1) { 
    legMsg = "Correlation < 0, hence chart empty" 
    legColor = 'red' 
    legMsg1 = '' 
} else { 
    legMsg = '-- Observed Std. Dev '; 
    legColor = 'black' 
    legMsg1 = ' corr < 0 not seen in the chart' 
    legColor1 = 'red' 
} 
$(window).resize(function() { 
    chart.setSize(
     $("#testPlaceHolder").width(), 
     $("#testPlaceHolder").height(), 
     false 
    ); 
}); 

function labelDisplay() { 
    //std dev label 
    var label = this.renderer.label(legMsg) 
     .css({ 
      width: '150px', 
      color: legColor, 
      fontSize: '11px', 
      fontWeight: 'bold' 
     }) 
     .add(); 
    label.align(Highcharts.extend(label.getBBox(), { 
     align: 'right', 
     x: 12, 
     verticalAlign: 'top', 
     y: 25 
    }), null, 'spacingBox'); 

    // negative cdorrelation label 
    var label1 = this.renderer.label(legMsg1) 
     .css({ 
      width: '115px', 
      color: legColor1, 
      fontSize: '10px', 
     }) 
     .add(); 
    label1.align(Highcharts.extend(label1.getBBox(), { 
     align: 'right', 
     x: 0, 
     verticalAlign: 'top', 
     y: 65 // offset 
    }), null, 'spacingBox'); 
    //model type legend label 
    var label2 = this.renderer.label("\u25B3 - S\t\t\u25EF - W ") 
     .css({ 
      width: '150px', 
      fontSize: '14px', 

     }) 
     .add(); 
    label2.align(Highcharts.extend(label2.getBBox(), { 
     align: 'right', 

     x: $(parentNode).outerWidth() * 0.00005 - 125, 
     verticalAlign: 'top', 
     y: $(parentNode).outerWidth() * 0.001 - 5 // offset 
    }), null, 'spacingBox'); 
    console.log(this) 
    //this.userOptions.series[0].marker.symbol = tmp.lsf_symb; 
} // end of labelDisplay function 
window.chart = new Highcharts.Chart({ 
    chart: { 
     width: $(parentNode).outerWidth() - 100, 
     height: ($(parentNode).outerWidth() - 100) * ScalePercent, 
     colors: ["#bf00ff", "#0080ff", "#25b629", "#ffbf00"], 
     events: { 
      load: labelDisplay 
     }, //end of events 
     renderTo: parentNode.replace("#", ""), 
     polar: true, 
    }, //end of charts 
    title: { 
     text: '' //'' 
    }, 
    legend: { 
     enabled: false 
    }, 
    pane: { 
     startAngle: 0, 
     endAngle: 90, 
     center: ['15%', '100%'], 
     size: '182%' 
    }, 
    //for each point in the plot 
    tooltip: { 
     formatter: function() { 
      console.log(this) 
      return 'Sim <b>' + this.point.num1 + '</b> (<b>' + this.x + "," + this.y + '</b>)'; 
     } 
    }, 
    xAxis: { 
     title: { 
      text: 'Correlation', 
      style: { 
       color: 'black', 
       font: 'bold 13px sans-serif' 
      }, 
      rotation: 65, 
      x: 235,//$(parentNode).outerWidth() * 0.58, 
      y: -$(parentNode).outerWidth() * 0.03 
     }, 
     tickInterval: 0.1, 
     min: 0, 
     max: 1, 
     labels: { 
      formatter: function() { 
       return this.value; 
      } 
     } 
    }, // end of x-axis 
    yAxis: [{ 
     title: { 
      align: "middle", 
      text: 'Normalized Standard Deviation', 
      style: { 
       color: 'black', 
       font: 'bold 14px sans-serif' 
      }, 
      rotation: 270, 
      x: -35, 
     }, 
     lineColor: "purple", 
     tickInterval: 0.25, 
     min: 0, 
     max: resp.max_std, 
     gridLineWidth: 0.5, 
     gridLineColor: "#222", 
     plotLines: [{ 
      //draw the observed standard deviation line which is always one as the std are normalized 
       value: 1, 
       dashStyle: 'Dash', 
       color: '#222', 
       width: 2, 
      }, 
      { 
       value: resp.max_std, 
       color: 'black', 
       width: 1, 
      } 
     ] 
    }], //end of y-axis 
    plotOptions: { 
     series: { 
      //label data in the chart 
      dataLabels: { 
       enabled: true, 
       format: '{point.num1}' 
      }, 
      marker: { 
       symbol: tmp.symbol 
      } 
     } 
    }, 
    series: [{ 
     type: 'scatter', 
     name: 'LASSO', 
     //data from the server 
     data: tmp 
    }] 
}); 

}

Answer 1

あなたがPoint.update関数を使用して各点を更新することができます。

APIリファレンス：
http://api.highcharts.com/highcharts/Point.update http://api.highcharts.com/highcharts/plotOptions.series.marker.symbol

例：
http://jsfiddle.net/abk21rdy/