javascript - 试图在 jsChart 中的数据中输入二维数组

Question

我正在尝试将我的二维数组输入到 js 数据输入图表中，以基本上在图表上显示每月每天的视图。

我的数据在图表的切换上按城市分类，但这不是我的问题。

我的数据：代表 6 个城市 (6) 的 6 个主要输入 [Array(12), Array(12), Array(12), Array(12), Array(12), Array(12)]

每个城市 /Array(12) 是每个城市每 12 个月的数据

每个 Array(12) 每天包含 Array(31) 我的图表代码：

var ctx = jQuery("#LineChart").get(0).getContext("2d");

    var options = {
        animation: false,
        bezierCurve: false,
        pointDot: false,
        datasetFill: false,
        responsive: true,
        scaleGridLineColor: "yellow",
        scaleLabel: "<%=value + '.00%' %>",
        scaleFontFamily: "'Open Sans', sans-serif",
        scaleFontColor: "#fff",
        scaleOverride: true,
        scaleSteps: 8,
        scaleStepWidth: 10,
        scaleStartValue: -40,
        tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%=value + '%' %>",
        tooltipCornerRadius: 3,
        multiTooltipTemplate: "<%=value + '%' %>",
        tooltipTitleFontFamily: "'Open Sans', sans-serif",
        legend: {
            display: false,
            labels: {
                fontColor: '#BABABA',
                boxWidth: 1,
                // boxHeight: 1,
                // usePointStyle: true,
            }
        }
    };

    var chartlabel = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

    var enableCheck = function () {
        SPOn = jQuery('.sp').hasClass('enabled');
        NCOn = jQuery('.nc').hasClass('enabled');
        SPAOn = jQuery('.sp-avg').hasClass('enabled');
        NCAOn = jQuery('.nc-avg').hasClass('enabled');
        SPYOn = jQuery('.spy-avg').hasClass('enabled');
        NCYOn = jQuery('.ncy-avg').hasClass('enabled');

        if (!(SPOn)) {
            SP = {};
        } else {
            SP = {
                label: cities[0].name,
                strokeColor: "#4EAEC4",
                pointColor: "#4EAEC4",
                borderColor: '#4EAEC4',
                data: generalData[0],
                fill: false,
                pointRadius: 0,
                borderWidth: 2
            };
        };
        if (!(NCOn)) {
            NC = {};
        } else {
            NC = {
                label: cities[1].name,
                strokeColor: "#EA3223",
                pointColor: "#EA3223",
                borderColor: '#EA3223',
                data: generalData[1],
                fill: false,
                pointRadius: 0,
                borderWidth: 2
            };
        };
        if (!(SPAOn)) {
            SPA = {};
        } else {
            SPA = {
                label: cities[2].name,
                strokeColor: "#1341BF",
                pointColor: "#1341BF",
                borderColor: '#1341BF',
                data: generalData[3],
                fill: false,
                pointRadius: 0,
                borderWidth: 2
            };
        };
        if (!(NCAOn)) {
            NCA = {};
        } else {
            // I had to switch series for the values to be right!!!!!!!
            NCA = {
                label: cities[3].name,
                strokeColor: "#CC5490",
                pointColor: "#CC5490",
                borderColor: '#CC5490',
                data: generalData[2],
                fill: false,
                pointRadius: 0,
                borderWidth: 2
            };
        };
        if (!(SPYOn)) {
            SPY = {};
        } else {
            SPY = {
                label: cities[4].name,
                strokeColor: "#707070",
                pointColor: "#707070",
                borderColor: '#707070',
                data: generalData[4],
                fill: false,
                pointRadius: 0,
                borderWidth: 2
            };
        };
        if (!(NCYOn)) {
            NCY = {};
        } else {
            NCY = {
                label: cities[5].name,
                strokeColor: "greenyellow",
                pointColor: "greenyellow",
                borderColor: 'greenyellow',
                data: generalData[5],
                fill: false,
                pointRadius: 0,
                borderWidth: 2
            };
        };
    };

    enableCheck();
    data = {
        labels: chartlabel,
        datasets: [SPA, NCA, SP, NC, SPY, NCY]
    };
    baseChart = newChart = new Chart(ctx, {
        type: "line",
        data: data,
        options: options
    });
    currentChart = baseChart;


    jQuery('.chart-toggles a').click(function () {
        currentChart.destroy();
        jQuery(this).toggleClass('enabled');
        enableCheck();
        data = {
            labels: chartlabel,
            datasets: [SPA, NCA, SP, NC, SPY, NCY]
        };
        newChart = new Chart(ctx, {
            type: "line",
            data: data,
            options: options
        });
        currentChart = newChart;
    });

我正在尝试实现类似于下图的东西

编辑 我还尝试使数据输入看起来像这样：

  SP = {
                    label: cities[0].name,
                    strokeColor: "#4EAEC4",
                    pointColor: "#4EAEC4",
                    borderColor: '#4EAEC4',
                    data: {
                        labels: ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17',
                        '18','19','20','21','22','23','24','25','26','27','28','29','30','31'],
                        dataset:[generalData[0][1],generalData[0][2],generalData[0][3],generalData[0][4],generalData[0][5],generalData[0][6],generalData[0][7],generalData[0][8],generalData[0][9],generalData[0][10],generalData[0][11],generalData[0][12]  ]
                    },
                    fill: false,
                    pointRadius: 0,
                    borderWidth: 2
                };

但它仍然没有工作。

标签： javascriptarrayschartsjscharts