Question

无法动态生成带有x轴和动态系列的动态折线图

我希望月份明智地计算在不同的目的地。

我这样做了

function GetDestinationData() {

    $.ajax({
    async: false,
    type: "POST",
    url: "DataAnalysis.aspx/getDestination",
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    success: OnSuccess1_,
    error: OnErrorCall1_

    });
    }

    function OnSuccess1_(response) {
    var Xaxis = [];//skapa tre olika array
    var dataseries = [];
    for (var i = 0; i < response.d.length; i++) {
    var items = response.d[i];
    var XcategoreisItem = items.Month;
    var seriesData = items;
    if ($.inArray(XcategoreisItem, Xaxis) == -1) {
    Xaxis.push(XcategoreisItem);
    }
    dataseries.push(seriesData);
    // console.log(dataseries);
    }


    drawLineChart(Xaxis, dataseries);

    }

        function drawLineChart(Xaxis, dataseries) {
        //categories = seriesData.map(function (a) { return a.x; });
        //categories = categories.filter(function (v, i) { return categories.indexOf(v) == i; });
        var chart = Highcharts.chart('container', {
        chart: {
        type: 'line',
        //zoomType: 'xy',
        //panning: true,
        //panKey: 'shift'
        },
        //chart: {
        // renderTo: 'container',
        // type: 'line',
        // marginRight: 130,
        // marginBottom: 25
        //},
        title: {
        text: 'Destination Count Month Wise'
        },
        plotOptions: {
        series: {
        dataLabels: {
        enabled: true,
        format: '{y}',

        }
        }
        },
        xAxis: {
        categories: Xaxis
        },
        yAxis: {
        labels: {
        formatter: function () {
        return this.value ;
        }
        },
        plotLines: [{
        //value: 0,
        width: 1,
        color: '#808080'
        }]
        },

        series: [{
        //name: 'Id',
        data: dataseries
        }],
        legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle'
        },
        });
        for (var i = 0; i < dataseries.length; i++) {
        //dataseries = dataseries.filter(function (e) {
        // return e.Month == dataseries[i].Month

        //}
        //);

        chart.addSeries({
        name: dataseries[i].destination,
        data: [dataseries[i].A1ResultCount]
        });
        //chart.series[i].setData(dataseries[i].data);
        }
        //chart.redraw();
        }

呈现图表

Answer 1

也许考虑使用处理动态数据的网络组件？

使用highcharts-chart即可：

CreateCustomer

const chart = $('#Chart')[0]
function OnSuccess1_(response) {
    var Xaxis = [];//skapa tre olika array
    var dataseries = [];
    for (var i = 0; i < response.d.length; i++) {
        var items = response.d[i];
        var XcategoreisItem = items.Month;
        var seriesData = items;
        if ($.inArray(XcategoreisItem, Xaxis) == -1) {
            Xaxis.push(XcategoreisItem);
            dataseries.push({name: items.month, data: items.data_maybe})
        }
        chart.data = dataseries
    }
}


//Example Data
chart.xAxis = {categories: ['Jan','Feb','Mar','Apr','May','Jun']}
chart.data = [43,81,52,84,53,45]

注意：点击 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="import" href="https://user-content-dot-custom-elements.appspot.com/avdaredevil/highcharts-chart/v2.0.1/highcharts-chart/highcharts-chart.html"> <highcharts-chart id='Chart' title='Destination Count Month Wise' type='line' y-label='Destinations' x-label='Month'></highcharts-chart> 查看图表

编辑：

在我写这个答案的时候，我也意识到你正在为一个系列设置 Run code snippet ？您不需要类别，而是需要多个系列本身，每个系列都有自己的名称对应月份。

使用highchart.js使用sql server数据库动态绘制折线图

1 个答案:

编辑：