chartjs 曲線圖 紀要

數據采集中各個終端的數據時間是不固定和數量也不固定的,所以不能用統一的x軸 標上固定數量的值區間的方式的 ,我簡單發現百度的echart 沒有具體的例子.

還是返回使用chartjs 盡管花樣組合上可能少了點,但是卻也夠用

官網:https://www.chartjs.org/

源碼是開源的.

1:在html代碼中加入這段:

<canvas id="myChart"></canvas>

2:   灰色地方labels 是可以去掉的, 在不固定具體時間的x軸坐標值的情況下,labels 可以去掉, 然后

datasets內的data 需要寫成下邊紅色字體的樣式 是一個json 格式的數組,當然data內數值數據多了需要一個一個push進去, 直接用json格式懟上似乎無效

var config = {
            type: 'line',
            data: {
                labels: [ // Date Objects
                    newDate(0),
                    newDate(1),
                    newDate(2),
                    newDate(3),
                    newDate(4),
                    newDate(5),
                    newDate(6) ],
                datasets: [{
                    label: 'My First dataset',
                    backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
                    borderColor: window.chartColors.red,
                    fill: false,
              data: [ randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor() ],
                }, {
                    label: 'My Second dataset',
                    backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
                    borderColor: window.chartColors.blue,
                    fill: false,
                 data: [ randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor() ],
                }, {
                    label: 'Dataset with point data',
                    backgroundColor: color(window.chartColors.green).alpha(0.5).rgbString(),
                    borderColor: window.chartColors.green,
                    fill: false,
              data: [{ x: newDateString(0),
                        y: randomScalingFactor()
                    }, {
                        x: newDateString(5),
                        y: randomScalingFactor()
                    }, {
                        x: newDateString(7),
                        y: randomScalingFactor()
                    }, {
                        x: newDateString(15), y: randomScalingFactor() }], }]
            },
            options: {
                title: {
                    text: 'Chart.js Time Scale'
                },
                scales: {
                    x: {
                        type: 'time',
                        time: {
                            parser: timeFormat,
                            // round: 'day'
                            tooltipFormat: 'll HH:mm'
                        },
                        scaleLabel: {
                            display: true,
                            labelString: 'Date'
                        }
                    },
                    y: {
                        scaleLabel: {
                            display: true,
                            labelString: 'value'
                        }
                    }
                },
            }
        };

到這兒會存在一個問題,x 軸的時間值x的格式 問題, 這里的格式chartjs 綁定的moment.js 中設置的格式一樣
  var timeFormat = 'YYYY/MM/DD HH:mm:ss';    服務器傳過來的數值也要轉換成這種格式,我是在服務器上直接把datetime 直接轉換成字符串的方式 , 因為不轉的話 傳到前端就是\date(12342423423)\ 類似這個字樣的東西

前端js完整代碼

<script>
    var timeFormat = 'YYYY/MM/DD HH:mm:ss';

    function newDate(days) {
      //  console.log(moment().add(days, 'h').toDate())
        return moment().add(days, 'h').toDate();
    }

    function newDateString(days) {
     //   console.log(moment().add(days, 'h').format(timeFormat))
        return moment().add(days, 'h').format(timeFormat);
    }
    var color = Chart.helpers.color;
    var config = {
        type: 'line',
        data: {
           @* labels: [
                newDateString(0),
                newDateString(1),
                newDateString(2),
                 newDateString(3),
                newDateString(4),
                newDateString(5),
                 newDateString(6),
                newDateString(7),
                newDateString(8)
            ],*@
            datasets: [ @*{
                label: '終端1',
                    backgroundColor: color('rgb(75, 192, 192)').alpha(0.5).rgbString(),
                    borderColor: color('rgb(75, 192, 192)').alpha(0.5).rgbString(),
                fill: false,
                data: [{
                    x: newDateString(0),
                    y: 25
                }, {
                    x: newDateString(1),
                    y: 19
                }, {
                    x: newDateString(2),
                    y: 18
                }, {
                    x: newDateString(3),
                    y: 23
                }],
            },
            {
                    label: '終端2',
                    backgroundColor: color('rgb(75, 192, 192)').alpha(0.5).rgbString(),
                    borderColor: color('rgb(75, 192, 192)').alpha(0.5).rgbString(),
                    fill: false,
                    data: [{
                        x: newDateString(0),
                        y: 36
                    }, {
                        x: newDateString(1),
                        y: 25
                    }, {
                        x: newDateString(2),
                        y: 13
                    }, {
                        x: newDateString(3),
                        y: 26
                    }],
                
                },
                {
                    label: '終端3',
                    backgroundColor: color('rgb(75, 192, 196)').alpha(0.5).rgbString(),
                    borderColor: color('rgb(75, 102, 192)').alpha(0.5).rgbString(),
                    fill: false,
                    data: [{
                        x: newDateString(0),
                        y: 20
                    }, {
                        x: newDateString(1),
                        y: 30
                    }, {
                        x: newDateString(2),
                        y: 40
                    }, {
                        x: newDateString(3),
                        y: 26
                    }],
                }*@

            ]
        },
        options: {
            title: {
                text: 'Chart.js Time Scale'
            },
            scales: {
                xAxes: [{
                    type: 'time',
                    time: {
                        parser: timeFormat,
                     //    round: 'day',
                      //  quarter: 'MMM YYYY'
                        tooltipFormat: 'll h:mm:ss a'
                    },
                    scaleLabel: {
                        display: true,
                        labelString: 'Date'
                    }
                }],
                yAxes: [{
                    scaleLabel: {
                        display: true,
                        labelString: 'value'
                    }
                }]
            },
        }
    };

    window.onload = function () {
        var ctx = document.getElementById('myChart').getContext('2d');
        window.myLine = new Chart(ctx, config);

    };

    var colorNames = Object.keys({
        red: 'rgb(255, 99, 132)',
        orange: 'rgb(255, 159, 64)',
        yellow: 'rgb(255, 205, 86)',
        green: 'rgb(75, 192, 192)',
        blue: 'rgb(54, 162, 235)',
        purple: 'rgb(153, 102, 255)',
        grey: 'rgb(201, 203, 207)', 
        SaddleBrown: 'rgb(139 69 19)',
        DarkCyan:'rgb(0 139 139)'
    });
    $('#addDataset').click(function () {
        $.ajax({
            type: "GET",
            url: "/AutoNetwork/ChartsLocations/LocationData",
            //   data: { username: $("#username").val(), content: $("#content").val() },
          //  data: { lastvalue: JsLastDatetime, terminal: jsvalues.terminal },
            dataType: "json",
            success: function (data1) {
           //     console.log(data1);

                //根據數量新建datasets
                var termlist = data1.Terminal_lst;                
             //   console.log(termlist);
                for (var i = 0; i < termlist.length; i++) {
                    var colorName = colorNames[config.data.datasets.length % colorNames.length]                

                    var newColor = window.chartColors[colorName];
                    var newDataset = {
                        label: '終端:' + termlist[i].DataIMEI,
                        borderColor: newColor,
                        backgroundColor: color(newColor).alpha(0).rgbString(),
                        data: [],
                    };
  
                    var tvlst = termlist[i].TimeAndValue_lst
                    for (var j = 0; j < tvlst.length; j++) {
                      //  console.log(tvlst[i])
                        newDataset.data.push(tvlst[j]);
                    }
                  //  console.log(da);  
                    config.data.datasets.push(newDataset);
                    window.myLine.update();

                }
            }
            , error: function (err) {
               // console.log(err.statusText);
                console.log('異常');
            }
        });
    });
    window.chartColors = {
        red: 'rgb(255, 99, 132)',
        orange: 'rgb(255, 159, 64)',
        yellow: 'rgb(255, 205, 86)',
        green: 'rgb(75, 192, 192)',
        blue: 'rgb(54, 162, 235)',
        purple: 'rgb(153, 102, 255)',
        grey: 'rgb(201, 203, 207)'
    };
</script>