使用Chartjs显示JSON数据

Question

首先-我的大部分开发经验是在后端，虽然我在这种情况下有大量的编程经验，但我对Javascript并不熟悉。

我设法产生了一个REST服务，该服务（通过GSON）生成了用数据库中的数据填充的JSON。该数据包括两个值的列表：日期和指示该日期温度的双精度值。可以找到所生成的JSON的示例here。

我想尝试做的是获取数据并在折线图中显示它。我一直在与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的值以.2递增-屏幕快照位于本文的底部。

老实说，我不知道如何从这里开始。 Chartjs甚至是一个不错的选择吗？开始怀疑我的咬伤是否超过了我的咀嚼能力。

Answer 1

由于您还问过“ Chartjs甚至是一个不错的选择吗？”，所以下面是DevExtreme Charts示例：（由devExtreme的sample修改）

我从此修改了您的数据：（正如我在问题的评论中提到的那样]

[ { "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"];