Conditional Symbols in Highcharts

问题

I am trying to create a line chart which shows internet usage per day for a certain number of machines. I want to use a symbol as shown here in Highcharts documentation whenever a certain data limit is exceeded. For example, where ever the usage is above 2.5 GB,I want it to show an Alert Symbol and above 3 GB some other symbol. Values lower than those should be shown by normal markers. These values will be fetched from dynamically created CSV files so I can not hard-code them as told in documentation. Need to give a condition where the marker will be replaced by symbol automatically if the condition is met. How can I achieve this?

The following is my series data

   series: [{
        name: '<Machine Ip>',
        data: [1.60, 3.60, 1.70, 2.70, 0.40]
    }, {
        name: '<Machine Ip>',
        data: [0.20, 3.40, 2.10, 2.30, 1.40]
    }, {
        name: '<Machine Ip>',
        data: [2.20, 1.40, 2.80, 0.60, 2.80]
    }]

I am sorry I can't share other code due to confidentiality reasons. I have not applied any logic so far as I have not been able to conjure up any. The Machine IP is dynamically obtained from values passed from earlier page. There is a variable in that place. Just replaced that by <machine ip> to make it clear.

Thanks in Advance

回答1:

Instead of updating, you can preprocess you data after you receive CSV, demo: http://jsfiddle.net/grLf9jn0/

Snippet:

$.each(parsedDataFromCSV, function (i, v) {
    parsedDataFromCSV[i] = {
        y: v,
        marker: v > 15 ? {
            symbol: 'url(http://www.highcharts.com/demo/gfx/snow.png)'
        } : (v > 10 ? {
            symbol: 'url(http://www.highcharts.com/demo/gfx/sun.png)'
        } : {})
    };
});

Or event better: when you parse your data from CSV to JS objects, add conditions to set marker there.

Edit:

When using data.js module, use data.complete callback, like this:

    data: {
        csv: document.getElementById('csv').innerHTML,
        complete: function (options) {
            $.each(options.series, function(j, series) {
                $.each(series.data, function(i, v) {
                  series.data[i] = {
                    y: v[1],
                    x: v[0],
                    marker: v[1] > 0.5 ? {
                        symbol: 'url(http://www.highcharts.com/demo/gfx/snow.png)'
                    } : (v[1] < 0 ? {
                        symbol: 'url(http://www.highcharts.com/demo/gfx/sun.png)'
                    } : {})
                  };
                });
            });
        }
    },

Demo: http://jsfiddle.net/mjjoyw94/1/

回答2:

You can use the callback argument of highcharts() function to update each points depending on its value. I have made an example on a temperature chart, JSFiddle: http://jsfiddle.net/qot0pjhp/

Important part of the code is:

$('#container').highcharts({
    /* ... */,
    function (chart) {
        $.each(chart.series[0].points, function (i, v) {
            if (v.y >= 25) {
                v.update({
                    marker: {
                        symbol: 'url(http://www.highcharts.com/demo/gfx/sun.png)'
                    }
                })
            } else if (v.y >= 15) {
                v.update({
                    marker: {
                        symbol: 'url(http://www.highcharts.com/demo/gfx/snow.png)'
                    }
                })
            }
        });
    });

So here each point above 25 will have a sun as marker, each point above 15 will have a snow cloud, and every other points will have the marker defined in plotOptions.

EDIT

If you have multiple series, you can just modify it to:

function (chart) {
     $.each(chart.series, function(index, serie_item) {
          $.each(serie_item.points, function (i, v) {
              /* ... */
          });
     });
});

来源：https://stackoverflow.com/questions/32453875/conditional-symbols-in-highcharts

标签

jquery

Highcharts