Highcharts动态分配符号

我想动态地分配符号到散点图中的点，我使用基于原始数据的值使用highcharts创建。在下面的示例数据中，我有一个名为符号的键和一个值（三角形，圆形和正方形）。我如何将这个值赋给“marker：{symbol：}”？这是一个示例数据。Highcharts动态分配符号

[{"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 
    }] 
});

}

来源

2017-07-28 B1K

Highcharts动态分配符号

回答

相关问题