不想更新图表dc.js

时间:2019-01-05 15:22:47

标签: dc.js

页面加载时我有图表。我看到包含数据的普通图表:

Ids,Dates,Values
Бар,2018-12-21,224
Бар,2018-12-22,352
Бар,2018-12-23,61
Бар,2018-12-24,379
Бар,2018-12-25,78.2
Бар,2018-12-26,0
Бар,2018-12-27,0
Бар,2018-12-28,0
Бар,2018-12-29,0
Бар,2018-12-30,0
Бар,2018-12-31,0
Бар,2019-01-01,0
Бар,2019-01-02,0
Бар,2019-01-03,0
Бар,2019-01-04,0
Бар,2019-01-05,270
Бар,2019-01-06,0
Бар,2019-01-07,0
Бар,2019-01-08,0
Бар,2019-01-09,0
Бар,2019-01-10,0
Бар,2019-01-11,0
Бар,2019-01-12,0
Бар,2019-01-13,0
Бар,2019-01-14,0
Бар,2019-01-15,0
Бар,2019-01-16,0
Бар,2019-01-17,0
Бар,2019-01-18,0
Бар,2019-01-19,0
Бар,2019-01-20,0

但是,如果我发送的ajax图表为空,但是有数据,并且如果我用此数据加载页面都正确,则只有ajax销毁图表:

Ids,Dates,Values
Бар,2018-11-21,178
Бар,2018-11-22,256
Бар,2018-11-23,226
Бар,2018-11-24,570
Бар,2018-11-25,266
Бар,2018-11-26,398
Бар,2018-11-27,0
Бар,2018-11-28,15
Бар,2018-11-29,80
Бар,2018-11-30,118
Бар,2018-12-01,41
Бар,2018-12-02,365
Бар,2018-12-03,180
Бар,2018-12-04,187
Бар,2018-12-05,38
Бар,2018-12-06,82
Бар,2018-12-07,390
Бар,2018-12-08,177
Бар,2018-12-09,359
Бар,2018-12-10,236
Бар,2018-12-11,7
Бар,2018-12-12,34
Бар,2018-12-13,478
Бар,2018-12-14,173
Бар,2018-12-15,290
Бар,2018-12-16,453
Бар,2018-12-17,52
Бар,2018-12-18,334
Бар,2018-12-19,0
Бар,2018-12-20,122

我的js代码:

$(document).ready(function() {
        $('.js_dashboard').focus(function() {
            allPostDataForOne($(this));
        });
        $('.js_dashboard').parents('.container').find('.js_dc_components').find('.js_data_graph').each(function(index, value) {
            renderBar(dc.barChart("#js_graphic_" + index), d3.csv.parse(d3.select(value).text()));
        });
    });

    function allPostDataForOne(elem) {
        var table = elem.parents('.container').find('.js_main_dasboard');
        $.ajax({
            url: '/../index/total' + $('.js_suffix').val(),
            type: 'POST',
            data: 'date=' + elem.val(),
            success: function(data) {
                table.html($($(data)).find('.js_main_dasboard').html());
                table.parents('.container').find('.js_dc_components').find('.js_data_graph').each(function(index, value) {
                    $($(data)).find('.container').find('.js_dc_components').find('.js_data_graph').each(function(index_res, value_res) {
                        if (index === index_res) {
                            value = value_res;
                        }
                    });
                    renderBar(dc.barChart("#js_graphic_" + index), d3.csv.parse(d3.select(value).text()));
                });
            },
        })
    }

    function renderBar(chart, experiments) {

        var start_date = new Date($('.js_start_date').val());
        var end_date = new Date($('.js_end_date').val());
        var format = d3.time.format("%Y-%m-%d");

        experiments.forEach(function(x) {
            x.Values = +x.Values;
        });

        var ndx = crossfilter(experiments);
        var runDimension = ndx.dimension(function(d) {
            return new Date(d.Dates);
        });
        var runGroup = runDimension.group().reduceSum(function(d) {
            return d.Values;
        });

        chart
            .width(750)
            .height(300)
            .x(d3.time.scale().domain([start_date, end_date]))
            .brushOn(false)
            .yAxisLabel(experiments[0]['Ids'])
            .xAxisLabel("Date")
            .dimension(runDimension)
            .mouseZoomable(true)
            .group(runGroup)
            .title(function(d) {
                return d.key.getFullYear() + '-' + parseInt(d.key.getMonth() + 1) + '-' + d.key.getDate() + ': ' + d.value;
            })

        chart.xUnits(function() {
            return experiments.length;
        });
        chart.render();
    }

我不明白如何正确更新图表。我看到了很多问题,但我不明白它们如何更新代码中的变换。

On load page On ajax send

0 个答案:

没有答案