Question

我正在尝试创建一个折线图，显示一定数量的计算机每天的互联网使用情况。我想在超过某个数据限制时使用here in Highcharts documentation所示的符号。例如，在使用量超过2.5 GB的情况下，我希望它显示一个警告符号和3 GB以上的其他符号。低于这些值的值应由正常标记显示。这些值将从动态创建的CSV文件中获取，因此我无法按照文档中的说明对其进行硬编码。需要提供一个条件，如果符合条件，标记将自动被符号替换。我怎样才能做到这一点？

以下是我的系列数据

   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]
    }]

很抱歉，出于保密原因，我无法分享其他代码。到目前为止，我还没有应用任何逻辑。机器IP是从先前页面传递的值动态获得的。那个地方有一个变量。只需将其替换为<machine ip>即可明确。

先谢谢

Answer 1

您可以在收到CSV，演示：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 ? {
            symbol: '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 ? { symbol: 'url(http://www.highcharts.com/demo/gfx/sun.png)' } : {}) }; }); }); } },

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

Answer 2

您可以使用highcharts()函数的回调参数根据其值更新每个点。我在温度图上做了一个例子，JSFiddle：http://jsfiddle.net/qot0pjhp/

代码的重要部分是：

$('#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)'
                    }
                })
            }
        });
    });

所以这里25以上的每个点都有一个太阳作为标记，每个高于15的点将有一个雪云，而其他每个点都将在plotOptions中定义标记。

修改

如果您有多个系列，可以将其修改为：

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

Highcharts中的条件符号

2 个答案: