Highcharts - 1系列的不同符号

时间:2013-02-04 10:51:30

标签: javascript highcharts

我找到了以下代码。我想在Highcharts中有1个系列的不同符号,阈值= 50.当y值小于50时,我想要绿色符号,当y值大于50时,我想要方形符号。

感谢您的帮助!

http://jsfiddle.net/mhardik/YgxEB/1/

$(function () {
var chart;
$(document).ready(function() {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'scatter',
            zoomType: 'xy'
        },
        title: {
            text: 'Scatter Graph Demo'
        },
        xAxis: {
            title: {
                enabled: true,
                text: 'Height (cm)'
            },
            startOnTick: true,
            endOnTick: true,
            showLastLabel: true
        },
        yAxis: {
            title: {
                text: 'Weight (kg)'
            }
        },
        tooltip: {
            formatter: function() {
                    return ''+
                    this.x +' cm, '+ this.y +' kg';
            }
        },
        plotOptions: {
            scatter: {
                marker: {
                    radius: 3,
                    symbol:myFunction(),
                }
            }
        },
        series: [{
            name: 'Points',
            color: 'rgba(223, 83, 83, .5)',
            data: [[161.2, 51.6], [167.5, 59.0], [159.5, 49.2], [157.0, 63.0], [155.8,   53.6]]

        }]
    });
});

});

function myFunction() {
if(true){
    return 'url(http://www.lib.udel.edu/ud/ill/images/green_marker.gif)';
} else{
    return 'square';
}
}

1 个答案:

答案 0 :(得分:5)

如果稍微重新组织代码,可以从数据数组开始,然后将其预处理为包含每个点的标记定义的对象文字:

data = $.map(data, function (point) {
    return {
        x: point[0],
        y: point[1],
        marker: {
            radius: 3,
            symbol: point[1] < 50 ?
                'url(http://www.lib.udel.edu/ud/ill/images/green_marker.gif)' :
                'square'
        }
    };
});

http://jsfiddle.net/highcharts/YgxEB/10/