亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

使用 Chartjs 顯示 JSON 數據

使用 Chartjs 顯示 JSON 數據

呼喚遠方 2021-11-12 15:27:39
首先 - 我的大部分開發經驗都在后端,雖然我在這方面有很多編程經驗,但我對 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 甚至是一個不錯的選擇嗎?開始懷疑我是否咬掉了超過我可以咀嚼的東西。
查看完整描述

1 回答

?
呼啦一陣風

TA貢獻1802條經驗 獲得超6個贊

既然您還問“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"];



查看完整回答
反對 回復 2021-11-12
  • 1 回答
  • 0 關注
  • 344 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號