使用 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 以 0.2 为增量 - 本文底部的屏幕截图。老实说，我不知道如何从这里开始。Chartjs 甚至是一个不错的选择吗？开始怀疑我是否咬掉了超过我可以咀嚼的东西。

Answer 1

既然您还问“Chartjs 是否是一个不错的选择？” ，这是一个DevExtreme Charts示例：（从 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"];