Highcharts中的条件符号 [英] Conditional Symbols in Highcharts

问题描述

我正在创建一个折线图，显示特定数量的机器每天的互联网使用情况。如果超过某个数据限制，我想使用 Highcharts文档中的所示的符号。例如，在使用量超过2.5 GB的地方，我希望它显示一个警报符号，高于3 GB的其他符号。低于这些值应通过正常标记显示。这些值将从动态创建的CSV文件中提取，因此我无法像文档中所述那样对它们进行硬编码。如果满足条件，则需要给出一个条件，标记将被符号自动替换。如何才能做到这一点？

以下是我的系列数据

 系列：[{
名称：'< 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] 
}] 
  

对不起由于保密原因，我无法分享其他代码。迄今为止，我还没有应用任何逻辑，因为我还没有想到任何逻辑。计算机IP是从先前页面传递的值动态获取的。在那个地方有一个变量。刚刚被< machine ip> 所取代，以便清除。

在此先感谢

解决方案

不用更新，您可以在收到CSV，demo后对数据进行预处理： http://jsfiddle.net/grLf9jn0/

片段：

  $。each（parsedDataFromCSV，function（i，v）{
 parsedDataFromCSV [i] = {
y：v，
 marker：v > 15？{
 symbol：'url（http://www.highcharts.com/demo/gfx/snow.png）'
}：（v> 10？{
符号：'url（http://www.highcharts.com/demo/gfx/sun.png）'
}：{}）
}; 
}）; 
  

或事件更好：当您将数据从CSV解析为JS对象，添加条件在那里设置标记。

编辑：

使用data.js模块时，使用 data.complete 回调，如下所示：

  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 ？{
符号：'url（http://www.highcharts.com/demo/gfx/sun.png）'
}：{}）
}; 
} ）; 
}）; 
} 
}，
  

演示： http://jsfiddle.net/mjjoyw94/1/

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

解决方案

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/

这篇关于Highcharts中的条件符号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！