javascript - Highcharts 动态分配符号

Question

我正在尝试将符号动态分配给我使用基于原始数据的值的 highcharts 创建的散点图中的点。在下面的示例数据中，我有一个名为“symbol”的键和一个值(三 Angular 形、圆形和正方形)。我如何将此值分配给“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/