仅使用JavaScript更新现有Highstock图的数据 [英] Update data of existing Highstock graph using only JavaScript

问题描述

我正在编辑一个站点，但我无权访问原始代码，我所能做的就是在其末尾附加代码.我没有使用PHP的权限(我想我还是不需要).

I'm editing a site and I don't have access to the original code, all I can do is append code to the end of it. I do not have access to PHP (I assume I don't need that anyway).

这是现有代码:

<div class="highstockchart" data-container="chartContainer" data-metadata-contractno="1" data-yaxis-title-text="kWh">
<div class="chart-serie in" data-serie-data="[4.0,4.0,3.0,4.0,3.0]" data-serie-id="0" data-serie-name="Forbruk" data-serie-pointstart="1424818800000" data-serie-tooltip-decimals="0" data-serie-tooltip-suffix=" kWh" id="chartContainer">
</div>
</div>
<script src="/Modules/Enoro.Standard/scripts/enoro.standard-0.2.8.js" type="text/javascript"></script>
<script src="/Modules/Enoro.Standard/scripts/highstock-1.3.9.js" type="text/javascript"></script>
<script src="/Modules/Enoro.Standard/scripts/highstock.exporting-1.3.9.js" type="text/javascript"></script>
<script src="/Themes/Enoro.Bootstrap/scripts/bootstrapx-clickover.js" type="text/javascript"></script>
<script type="text/javascript">

        //HIGHSTOCKCHART
        (function () {
            var highstockchart = enoro.namespace("orchard.standard.consumption.highstockchart");
            highstockchart.defaults = {
                chart: {
                    renderTo: null,
                },

                credits: {
                    enabled: false
                },

                navigator: {
                    series: {
                        includeInHtmlTableExport: false
                    }
                },

                rangeSelector: {
                    buttonTheme: {
                        width: 70,
                        height: 20
                    },
                    inputEnabled: false,
                    buttons: [
                        {
                            type: 'day',
                            count: 1,
                            text: 'Dag'
                        }, {
                            type: 'week',
                            count: 1,
                            text: 'Uke'
                        }, {
                            type: 'month',
                            count: 1,
                            text: 'Måned'
                        }, {
                            type: 'all',
                            text: 'All'
                        }
                    ],
                    selected: 2
                },
                yAxis: [
                    {
                        id: 'yAxis-consumption',
                        title: {
                            text: 'kWh'
                        }
                    }
                ],

                title: {
                    text: null
                },

                series: [
                {
                    id: 'thisyear',
                    name: null,
                    data: null,
                    type: 'spline',
                    pointStart: null,
                    pointInterval: 3600 * 1000,
                    dataGrouping: {
                        approximation: "sum",
                        enabled: true
                    },
                    tooltip: {
                        valueDecimals: 1,
                        valueSuffix: " kWh"
                    }
                }
                ]
            };
        }());

        (function () {
            var consumption = enoro.namespace("orchard.standard.consumption");
            consumption.init();
        }());
</script>

使用以下代码，我可以从URL检索新数据，但是我不确定如何应用它并重绘图形.请记住，我无法编辑上面的任何代码:

Using the following code I can retrieve the new data from an URL, but I'm not sure how to apply it and redraw the graph. Keep in mind I can't edit any of the code above this:

$.getJSON('*url*', function(data) {
     // data.data gives the following result: [3.0,2.0,3.0,5.0,8.0]
     // How do I apply this data and redraw the graph?
});

当前图形从属性data-serie-data ="[4.0,4.0,3.0,4.0,3.0]"中绘制值.

Currently the graph draws the values from the attribute data-serie-data="[4.0,4.0,3.0,4.0,3.0]".

如何将data.data应用于图形并重绘?

How do I apply the data.data to the graph and redraw it?

我已经尝试了以下方法，但这不起作用:

I've tried the following, but that doesn't work:

highstockchart.series[0].setData(data.data,true);

推荐答案

在/Meter/Consumption页面上的Chrome控制台中，您应该可以粘贴以下内容，并且应突出显示最高的4个值: http://pastebin.com/4RzYXcBh

In the Chrome console on the /Meter/Consumption page you should be able to paste in the following and it should highlight the highest 4 values: http://pastebin.com/4RzYXcBh

这篇关于仅使用JavaScript更新现有Highstock图的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！