用 Chartjs 顯示 JSON 數據

Question

首先 - 我的大部分開發經驗是后端，雖然我在這方面有豐富的編程經驗，但我對 Javascript 並不熟悉。

我設法生成了一個 REST 服務，該服務（通過 GSON）生成 JSON 填充數據庫中的數據。 此數據包括兩個值的列表：日期和表示該日期溫度的雙精度值。 可以在此處找到生成的 JSON 的示例。

我想嘗試做的是獲取數據並將其顯示在折線圖中。 我一直在用 Chartjs 嘗試這個，但成功非常有限。

我目前用來嘗試讓圖表工作的代碼是：

var data = [{"2019-03-30":11.0},{"2019-03-31":10.2},{"2019-04-01":10.0}];
var ctx = document.getElementById("temperatureChart").getContext('2d');
var chart = new Chart(ctx, {
    type: "line",
    data: {
        datasets: [
            {
                label: "2019",
                data: data,
                borderColor: "rgb(192,49,62)",
                fill: false
            }
        ]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        title: {
            display: true,
            text: 'Temperature Averages'
        }

    }
});

如您所見 - 目前，我只是簡單地對一些數據值進行硬編碼，以嘗試使其正常工作。 所有這些產生的是一個圖表，X 軸上沒有任何內容，值 -1.0 到 1.0 in.2 增量 - 截圖在這篇文章的底部。

老實說，我不知道如何從這里開始。 Chartjs 甚至是一個不錯的選擇嗎？ 開始懷疑我是否咬得比我能咀嚼的更多。

Answer 1

既然您還問“Chartjs 是不是一個不錯的選擇？” ，這是一個DevExtreme 圖表示例：（修改自 devExtreme 的示例）

我從中修改了您的數據：（正如我在您的問題評論中提到的）

[ { "2019-03-30" : 11.0 }, { "2019-03-31" : 10.2 }, { "2019-04-01" : 10.0 }]

對此：

[ { x: "2019-03-30", y: 11.0 }, { x: "2019-03-31", y: 10.2 }, { x: "2019-04-01", y: 10.0 }]

HTML ：

    <div class="dx-viewport demo-container">
        <div id="chart-demo">
            <div id="chart"></div>
            <div class="options">
                <div class="caption">Options</div>
                <div class="option">              
                    <span>Series Type</span>
                    <div id="types"></div>
                </div>    
            </div>
        </div>
    </div>

CSS ：

.options {
    padding: 20px;
    background-color: rgba(191, 191, 191, 0.15);
    margin-top: 20px;
}

.option {
    margin-top: 10px;
}

.caption {
    font-size: 18px;
    font-weight: 500;
}

.option > span {
    margin-right: 10px;
}

.option > .dx-widget {
    display: inline-block;
    vertical-align: middle;
}

Javascript ：

$(function(){
    var chart = $("#chart").dxChart({
        palette: "Violet",
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: "x",
            type: types[0]
        },
        margin: {
            bottom: 20
        },
        argumentAxis: {
            valueMarginsEnabled: false,
            discreteAxisDivisionMode: "crossLabels",
            grid: {
                visible: true
            }
        },
      series: [
            { valueField: "y", name: "Temperature" }
        ],
        legend: {
            verticalAlignment: "bottom",
            horizontalAlignment: "center",
            itemTextPosition: "bottom"
        },
        title: { 
            text: "Daily Temperature Variations",
            subtitle: {
                text: "(Celsius)"
            }
        },
        "export": {
            enabled: true
        },
        tooltip: {
            enabled: true,
            customizeTooltip: function (arg) {
                return {
                    text: arg.valueText
                };
            }
        }
    }).dxChart("instance");

    $("#types").dxSelectBox({
        dataSource: types,
        value: types[0],
        onValueChanged: function(e){
            chart.option("commonSeriesSettings.type", e.value);
        }
    });
});

var dataSource = [ { x: "2019-03-30", y: 11.0 }, { x: "2019-03-31", y: 10.2 }, { x: "2019-04-01", y: 10.0 }];

var types = ["line", "stackedline", "fullstackedline"];