谷歌折线图使用开始和结束日期

Question

我有一个开始日期（01月1日）和结束日期（31月12日）。在此期间有三个人拍照。

例如：

var chartData = {
  "period":{"startDate":"01 jan","endDate":"31 Dec"},
  "person1":[{"date":"01 feb","photos":5},{"date":"15 aug","photos":5}, {"date":"20 dec","photos":5}],
  "person2":[{"date":"25 feb","photos":2},{"date":"18 july","photos":8},{"date":"05 nov","photos":2}],
  "person3":[{"date":"01 march","photos":4},{"date":"15 aug","photos":1}]
}

我想使用以上数据创建图表。

示例图表：          

注意：x轴应以mmm格式显示月份

Answer 1

您可以考虑通过Google Line Chart系列来绘制它。 由于指定的格式与Google Chart JSON格式不兼容，下面的示例演示了如何转换它并显示：

＆＃13;

＆＃13;

google.charts.load('current', { packages: ['corechart', 'line'] });
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
    var jsonData = {
        "period": {
            "startDate": "01 jan",
            "endDate": "31 Dec"
        },
        "person1": [
            {
                "date": "01 feb",
                "photos": 5
            },
            {
                "date": "15 aug",
                "photos": 5
            },
            {
                "date": "20 dec",
                "photos": 5
            }
        ],
        "person2": [
            {
                "date": "25 feb",
                "photos": 2
            },
            {
                "date": "18 july",
                "photos": 8
            },
            {
                "date": "05 nov",
                "photos": 2
            }
        ],
        "person3": [
            {
                "date": "01 march",
                "photos": 4
            },
            {
                "date": "15 aug",
                "photos": 1
            }
        ]
    };


    var data = {
        "cols": [],
        "rows": []
    };

    //columns
    for (var key in jsonData) {
        if (jsonData.hasOwnProperty(key)) {
            addColumn(data, key, (key === "period" ? "date" : "number"));
        }
    }

    var columnPositions = { "person1": 1, "person2": 2, "person3": 3 };

    //rows
    for (var key in jsonData) {
        if (jsonData.hasOwnProperty(key)) {
            if (key == "period") {
                addRow(data, [parsePeriod(jsonData[key].startDate), null, null, null]); //start
                addRow(data, [parsePeriod(jsonData[key].endDate), null, null, null]);   //end
            } else {
                var columnPos = columnPositions[key];
                jsonData[key].forEach(function(item) {
                    var vals = [parsePeriod(item.date), null, null, null];
                    vals[columnPos] = item.photos;
                    addRow(data, vals);
                });
            }
        }
    }

   


    var dataTable = new google.visualization.DataTable(data);
    
    var options = {
        interpolateNulls: true,
        hAxis: {
            title: 'Period',
            format: 'MMM'
        },
        vAxis: {
            title: 'Number of photos'
        }
    };


    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(dataTable, options);
}




function parsePeriod(value) {
    var monthNames = { 'jan': 0, 'feb': 1, 'march': 2, 'apr': 3, 'may': 4, 'jun': 5, 'july': 6, 'aug': 7, 'sep': 8, 'oct': 9, 'nov': 10, 'dec': 11 };
    var parts = value.split(" ");
    var day = parseInt(parts[0]);
    var month = monthNames[parts[1].toLowerCase()];
    var d = new Date(2015, month, day);
    return d;
}



function addColumn(data, label, type) {
    data.cols.push({
        "id": "",
        "label": label,
        "pattern": "",
        "type": type
    });
}


function addRow(data, values) {
    
    var rowValues = values.map(function (v) {
        return { "v": v };
    });

    data.rows.push({
        "c": rowValues
    });
}

＆＃13;

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

＆＃13;

＆＃13;

＆＃13;