Question

我想使用highchart创建报告访问者，但我有一个问题当我显示数据时，本月的高清图与数据库

中的月不一样

你可以看到我的截图

屏幕截图：“ Highchart ”。
屏幕截图：“数据库”

enter image description here

您可以在“ month_visitor ”中看到此值为

的字段

05-2015（2015年5月）和06-2015（Juny 2015）我的问题如何在数据库中设置高图月份？

这是我的脚本

http://pastebin.com/N0LXyZiW

帮助我谢谢

Answer 1

请看这个例子：http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/spline-symbols/有12个列名

categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']

和12点数据

data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, {
            y: 26.5,
            marker: {
                symbol: 'url(http://www.highcharts.com/demo/gfx/sun.png)'
            }
        }, 23.3, 18.3, 13.9, 9.6]

如果删除数据，图表会调整到一边。 Highcharts假设您的轴＆＃39;你输入你也提供有效数据。因此，要修复你的高潮图要么输入0几个月没有任何访问者，要么删除那些你不想看到的月份。

Answer 2

您需要将从数据库返回的值与类别的数组索引相匹配。

因此，如果月份是6月，那么您的数据的x值必须为5 - 您的类别数组中的6月索引。

我不会通过在图表代码中间进行SQL查询来实现这一点 - 应该设置一个类和/或函数来预先检索和处理您的数据 - 但无论如何，在您的循环中你拉数据来处理你需要分配一个x和ay值 - x为类别索引，y为数据值。

即，在您的PHP中，您可以这样做，假设您的类别中包含所有12个月，则将月份数-1作为每个数据点的x值返回。

或者，您可以使用datetime x轴类型，并将x值设置为时间戳。

使用类别的示例：

http://jsfiddle.net/jlbriggs/6s75mka5/

datetime轴类型的参考：

http://api.highcharts.com/highcharts#xAxis.type

Answer 3

从数据库中获取请求，然后使数组变量存储从数据库中获取的类别。

let categories = []

，然后创建一个函数来进行更新，并在您希望更新类别时调用它。这是示例：

let saleChart = new Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Sales'
    },
    xAxis: {
        id: 'categories',
        categories: updateCat(), // this is the function that update your categories
        crosshair: true
    },
    yAxis: {
        title: {
            text: 'Amount'
        }
    },
    tooltip: {
        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
            '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
        footerFormat: '</table>',
        shared: true,
        useHTML: true
    },
    plotOptions: {
        column: {
            pointPadding: 0.2,
            borderWidth: 0
        }
    },
    series: [
        {
            id: 'amount',
            name: 'Amount',
            data: allItemsOfSale()
        }
    ]
});

function updateCat() {
    itemsData = []

    $.get(<?php echo json_encode(site_url("your url here")); ?>)
    .done((data) => {
        const itemsData = data.map(items => items.item);

        saleChart.get('categories').update({
            categories: itemsData
        })
        toastr.success('Item Updated')
        return itemsData
        })
    .fail((err) => {
        toastr.error('Cant load chart content')
    })
}

您的类别应该更新

如何将Month In Highchart设置为与数据库相同

3 个答案: