通过每月循环查询来填充 highchart 系列

约翰

我想从 highchart 填充我的系列数据。我在这里做的是我用我的第一个 ajax 获取我的 x 轴(返回几个月),它给了我几个月的时间,每个月我都得到,我每个月循环它我得到我的系列的另一个数据..

这是我的第一个 ajax :它给了我这些输出: [{"datemonths":"February"},{"datemonths":"April"}]

function getbarxAxis() {
 $.ajax({
   url: siteurl+"patients_report/bardata_date",
   type: "POST",
   dataType: "JSON",
   success: function(data) {
     var categories = new Array();
     for (var i in data) {
       categories.push(data[i]["datemonths"]);
       getbarseries(data[i]["datemonths"]);
     }
    loadChart(categories);
   }
 });
}

我很困惑,我怎样才能形成我的系列数据并将我的数据传递给系列,我该怎么做?这是我的第一个 ajax 循环内函数的第二个代码:在这些 ajax 中,它给了我两个 JSON 数据,因为第一个 ajax 给了我两个月的时间

第一个循环: [{"clinic_name":"Clinic 1","total_checked_up":"4"}]

第二个循环: [{"clinic_name":"Clinic 2","total_checked_up":"1"},{"clinic_name":"Clinic 3","total_checked_up":"1"}]

function getbarseries(month) {
    $.ajax({
      url: siteurl+"patients_report/bardataclinic/"+month,
      type: "POST",
      dataType: "JSON",
        success: function(data) {
          alert(data);
        }
    });
}

这是我想从上面的代码中修改它的函数,现在我设法更改了 x 轴,现在我很困惑我该怎么做才能根据我的数据库数据更改系列默认数据以使其动态化. 这里是:

function loadChart(categories) {
    Highcharts.chart('container', {
        chart: {
            type: 'bar'
        },
        title: {
            text: ''
        },
        xAxis: {
            categories: categories
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Detailed patient per clinic'
            }
        },
        legend: {
            reversed: true
        },
        plotOptions: {
            series: {
                stacking: 'normal'
            }
        },
        series: [{
            name: 'John',
            data: [5, 3, 4, 7, 3, 2]
        }, {
            name: 'Jane',
            data: [2, 2, 3, 2, 4, 2]
        }, {
            name: 'Joe',
            data: [3, 4, 4, 2, 1, 3]
        }]
    });
}
弗拉基米尔

一种可能的方法是:

1) 有一个全局变量来承载对您创建的 highcharts 图表的引用:

var chart;
function loadChart(categories) {
    chart = Highcharts.chart('container', {
        chart: {
            type: 'bar'
        },
        title: {
            text: ''
        },
        xAxis: {
            categories: categories
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Detailed patient per clinic'
            }
        },
        legend: {
            reversed: true
        },
        plotOptions: {
            series: {
                stacking: 'normal'
            }
        }
    });
}

然后,当您完成从第二次 ajax 调用加载数据时,您可以使用以下 API 添加系列数据:http : //api.highcharts.com/highcharts/Chart.addSeries

(这就是为什么你需要变量来引用图表实例)

// data should be in correct form for highcharts series
function populate_data( data ){
    chart.addSeries(data);
};

作为旁注,您的代码需要结构,因为“样板”变得难以真正快速管理。

关于如何在不同调用中添加系列数据的示例:http : //jsfiddle.net/gpusx8ze/

var chart;
function doAxis( axis ){
    chart = Highcharts.chart('container', {
        xAxis: {
            categories:axis
        },

        plotOptions: {
            series: {
                stacking: 'normal'
            }
        }
    });
}

function doData( data ){
chart.addSeries({
            data: data
        })
}


doAxis( ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
doData( [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]);
doData( [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]);

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

删除闪亮的Highchart系列

来自分类Dev

HighChart中的系列数据

来自分类Dev

JSON数组的Highchart系列

来自分类Dev

Highchart系列鼠标悬停

来自分类Dev

Highchart系列鼠标悬停

来自分类Dev

在彼此下方水平显示Highchart系列

来自分类Dev

Highchart-如何控制系列之间的差距

来自分类Dev

如何在highchart中删除额外的系列

来自分类Dev

Highchart不添加新系列或删除旧系列

来自分类Dev

如何更改HighChart图表中的系列图例文本颜色?

来自分类Dev

系列标记在Highchart中禁用行并启用图例

来自分类Dev

在highchart中启用向下钻取而无需修改系列

来自分类Dev

Highchart:一次只显示一个系列

来自分类Dev

Highchart无法在系列数据中使用javascript变量(数组)

来自分类Dev

从单个JSON数据容器在Highchart中绘制多个系列

来自分类Dev

从JSON文件创建具有多个系列的Highchart

来自分类Dev

将值Json数据获取为系列名称Highchart

来自分类Dev

HighChart:在系列上显示自定义标签(样条)

来自分类Dev

HighChart时间系列的时间从下午4点开始

来自分类Dev

如何使用json数据值重绘highchart系列?

来自分类Dev

如何使用highchart在密集系列中突出垂直绘制的线?

来自分类Dev

使用带有系列和 xAxis 数据的 json 的 highchart bar

来自分类Dev

Highchart polar 与下面的其他饼图系列

来自分类Dev

超过 1 个系列的 Highchart 显示不显示

来自分类Dev

根据列 Highchart 上的 X 轴设置系列颜色

来自分类Dev

DotNet HighChart未填充

来自分类Dev

从季度系列中形成每月系列

来自分类Dev

在 R 中的 highchart 内循环

来自分类Dev

填充系列VBA代码