时间戳

首页 > 解决方案 > 将数组推入对象 Javascipt

javascript - 将数组推入对象 Javascipt

问题描述

我正在尝试使用 chartJS 开发图表。但我的问题是关于 javascript 的基本问题。

我的html代码是

<div class="static-spline-chart-1" data-points='[
                                    { x: new Date(2017, 0, 3), y: 650 },
                                    { x: new Date(2017, 0, 4), y: 700 },
                                    { x: new Date(2017, 0, 5), y: 710 },
                                    { x: new Date(2017, 0, 6), y: 658 },
                                    { x: new Date(2017, 0, 7), y: 734 },
                                    { x: new Date(2017, 0, 8), y: 963 },
                                    { x: new Date(2017, 0, 9), y: 847 },
                                    { x: new Date(2017, 0, 10), y: 853 },
                                    { x: new Date(2017, 0, 11), y: 869 },
                                    { x: new Date(2017, 0, 12), y: 943 },
                                    { x: new Date(2017, 0, 13), y: 970 },
                                    { x: new Date(2017, 0, 14), y: 869 },
                                    { x: new Date(2017, 0, 15), y: 890 },
                                    { x: new Date(2017, 0, 16), y: 930 }
                                ] '></div>
<div class="static-spline-chart-1" data-points='[
                                    { x: new Date(2017, 0, 3), y: 650 },
                                    { x: new Date(2017, 0, 4), y: 700 },
                                    { x: new Date(2017, 0, 5), y: 710 },
                                    { x: new Date(2017, 0, 6), y: 658 },
                                    { x: new Date(2017, 0, 7), y: 734 },
                                    { x: new Date(2017, 0, 8), y: 963 },
                                    { x: new Date(2017, 0, 9), y: 847 },
                                    { x: new Date(2017, 0, 10), y: 853 },
                                    { x: new Date(2017, 0, 11), y: 869 },
                                    { x: new Date(2017, 0, 12), y: 943 },
                                    { x: new Date(2017, 0, 13), y: 970 },
                                    { x: new Date(2017, 0, 14), y: 869 },
                                    { x: new Date(2017, 0, 15), y: 890 },
                                    { x: new Date(2017, 0, 16), y: 930 }
                                ] '></div>

而js代码是：

    var StaticSplineChartOptions = {
    backgroundColor: "transparent",
    axisY: {
        lineThickness: 0,
        includeZero: false,
        gridThickness: 0,
        tickLength: 0,
        lineThickness: 0,
        labelFontSize:0,
        margin:-20,
    },
    axisX: {
        labelFontSize:0,
        lineThickness: 0,
        includeZero: false,
        gridThickness: 0,
        tickLength: 0,
        lineThickness: 0,
    },
    tickThickness: 0,

}
function RenderStaticSplineChart(className,options) {
    var charts = [];
    var chartClassElements = document.getElementsByClassName(className);
    for (var i = 0; i < chartClassElements.length; i++) {
        var dataPoints = chartClassElements[i].data('points');
        options.push({
            data: [{
                color: '#fff',
                type: "spline",
                markerSize: 0,
                dataPoints: dataPoints,
            }]
        });
        charts.push(new CanvasJS.Chart(chartClassElements[i], options));
        charts[i].render();
    }
}

RenderStaticSplineChart("static-spline-chart-1", StaticSplineChartOptions);

我的目标是制作StaticSplineChartOptions如下对象

var StaticSplineChartOptions = {
    backgroundColor: "transparent",
    axisY: {
        lineThickness: 0,
        includeZero: false,
        gridThickness: 0,
        tickLength: 0,
        lineThickness: 0,
        labelFontSize:0,
        margin:-20,
    },
    axisX: {
        labelFontSize:0,
        lineThickness: 0,
        includeZero: false,
        gridThickness: 0,
        tickLength: 0,
        lineThickness: 0,
    },
    tickThickness: 0,
    data: [{
        color: '#fff',
        type: "spline",
        markerSize: 0,
        dataPoints: [
            { x: new Date(2017, 0, 3), y: 650 },
            { x: new Date(2017, 0, 4), y: 700 },
            { x: new Date(2017, 0, 5), y: 710 },
            { x: new Date(2017, 0, 6), y: 658 },
            { x: new Date(2017, 0, 7), y: 734 },
            { x: new Date(2017, 0, 8), y: 963 },
            { x: new Date(2017, 0, 9), y: 847 },
            { x: new Date(2017, 0, 10), y: 853 },
            { x: new Date(2017, 0, 11), y: 869 },
            { x: new Date(2017, 0, 12), y: 943 },
            { x: new Date(2017, 0, 13), y: 970 },
            { x: new Date(2017, 0, 14), y: 869 },
            { x: new Date(2017, 0, 15), y: 890 },
            { x: new Date(2017, 0, 16), y: 930 }
        ] 
    }]
}

但我收到这样的错误jquery.js:2 Uncaught TypeError: chartClassElements[i].data is not a function。我如何在 for 循环中获取该类的数据属性？以及在获取该数据后如何获取上述类型的对象？

标签： javascript

解决方案

而不是 chartClassElements[i].data('points') 尝试

chartClassElements[i].attr('data-points')

但是您仍然对其余代码有疑问。上述代码的返回不在数组中。它是一个简单的文本。您可以使用一些后端语言将这些数据点放在 html 中。尝试 jsonify 或序列化它。所以当你用js读取它之后，通过简单的反序列化或解析json，你可以得到真正的数组

推荐阅读