Question

开发使用yii2的应用程序，我想整合miloschuman图表扩展

默认使用

echo Highcharts::widget([
'scripts' => [
    'modules/exporting',
    'themes/grid-light',
],
'options' => [
    'title' => [
        'text' => 'Trucks chart',
    ],
    'xAxis' => [
        'categories' => ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums'],
    ],
    'labels' => [
        'items' => [
            [
                'html' => 'Total fruit consumption',
                'style' => [
                    'left' => '50px',
                    'top' => '18px',
                    'color' => new JsExpression('(Highcharts.theme && Highcharts.theme.textColor) || "black"'),
                ],
            ],
        ],
    ],
    'series' => [
        [
            'type' => 'column',
            'name' => 'Rejected trucks',
            'data' => [3, 2, 1, 3, 4],
        ],
        [
            'type' => 'column',
            'name' => 'Approved trucks',
            'data' => [2, 3, 5, 7, 6],
        ],
        [
            'type' => 'column',
            'name' => 'Joe',
            'data' => [4, 3, 3, 9, 0],
        ],
        /*[
            'type' => 'spline',
            'name' => 'Average',
            'data' => [3, 2.67, 3, 6.33, 3.33],
            'marker' => [
                'lineWidth' => 2,
                'lineColor' => new JsExpression('Highcharts.getOptions().colors[3]'),
                'fillColor' => 'white',
            ],
        ],*/
        [
            'type' => 'pie',
            'name' => 'Total trucks in pie chart',
            'data' => [
                [
                    'name' => 'Jane',
                    'y' => 13,
                    'color' => new JsExpression('Highcharts.getOptions().colors[0]'), // Jane's color
                ],
                [
                    'name' => 'John',
                    'y' => 23,
                    'color' => new JsExpression('Highcharts.getOptions().colors[1]'), // John's color
                ],
                [
                    'name' => 'Joe',
                    'y' => 19,
                    'color' => new JsExpression('Highcharts.getOptions().colors[2]'), // Joe's color
                ],
            ],
            'center' => [100, 80],
            'size' => 100,
            'showInLegend' => false,
            'dataLabels' => [
                'enabled' => false,
            ],
        ],
    ],
]

]）;

这使得数据很好但我想用自定义的javascript函数获取数据，每5秒刷新一次数据。我该怎么做呢

我有自定义功能

$this->registerJs('$.getJSON("//www.highcharts.com/samples/data/
jsonp.php?filename=aapl-c.json&callback=?",
myCallbackFunction);');

如何更改系列中的数据以使用返回json

的ajax函数

我已经检查过：this link但它不是很有用，有人可以指导我前进的道路，或者可能是其他在ajax请求中使用来自服务器的数据实现yii2图表的扩展

Answer 1

您的问题并没有给出很多关于您自己愿意做多少试错的事情，或者您是否正在寻找所需的每项更改的完整代码。如果您正在寻找具体信息而不是指导所需的更改，请告诉我。

希望这能让你到达目的地：

将数据创建（代码中数组的系列部分）移动到相关模型中的方法（静态或其他方式）。

例如，如果您正在处理卡车，那么您可以创建public static function getChartData(){然后Truck::getChartData()

该方法将返回一个php数组。 e.g：

[ 'type' => 'column', 'name' => 'Rejected trucks', 'data' => [3, 2, 1, 3, 4], ], [ 'type' => 'column', 'name' => 'Approved trucks', 'data' => [2, 3, 5, 7, 6], ],

这可以包含在上面的现有代码中，或者使用JSON::encode()或类似转换，以便在使用ajax请求时每5秒返回一次。

在上面的代码中使用您的新方法。所以：

'series' => Truck::getChartData()

获取图表，每5秒钟请求更新一次数据。

您链接到的页面有一个示例，该示例在图表的加载事件中触发，并每5秒发送一次ajax请求。它似乎只更新了第一个系列[0]，但可以轻松更新以切换所有系列。这应该做得很好，除非有一些特定的东西不适合你。

您需要在config中使用新路由将上面的ajax请求发送到，然后在相关控制器中执行一个新操作，该操作将返回Truck::getChartData()的json编码响应，以便重用该方法。

使用yii2中的图表，每次都使用ajax刷新

1 个答案: