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

Question

我想使用highchart创建报表访问者，但是当我显示数据时我有一个问题，这个月在数据库中的月份不同于月份

你可以看到我的截图

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

你可以在“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假设您输入的轴也可以输入有效数据。因此，要修复您的高图，要么输入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')
    })
}

并且您的类别应该更新