javascript 是否有canvasJS图的例子,其中图上的每个点在X轴上都有一个标记和标签?

h5qlskok  于 2023-04-28  发布在  Java
关注(0)|答案(1)|浏览(102)

我似乎找不到一个例子,一组数据中的每一个点都有自己的刻度和标签。当我加载数据时,CanvasJS给我一个区间作为x轴。实际点被放置在这些间隔之间。如果我添加更多的数据,间隔不会改变。我正在寻找一个例子,如何使它,使每一点都表示。
我还希望xaxis看起来尽可能与此格式相同x1c 0d1x
我读过一些文档here,但我很难让它为我工作。我的X轴值看起来像这样:119604384477647324,但单位为毫秒。
任何帮助将不胜感激。我马上要做一个演讲,我被卡住了。谢谢!

ibps3vxo

ibps3vxo1#

Canvas.js提供了广泛的图表,可以通过多种方式进行自定义。需要记住的一个关键点是确保数据数组dataPoint的格式正确,并且包含所有相应的元素。
我相信你正在尝试做的事情可以通过利用valueFormatString变量来完成,请在下面找到一个类似的例子,当使用时间戳数据(以毫秒为单位存储为Unix时间戳)时,它会创建一个面积图。

function timeConverter(timestamp) {
                              const date = new Date(timestamp);
                              const year = date.getFullYear();
                              const month = ("0" + (date.getMonth() + 1)).slice(-2);
                              const day = ("0" + date.getDate()).slice(-2);
                              const hours = ("0" + date.getHours()).slice(-2);
                              const minutes = ("0" + date.getMinutes()).slice(-2);
                              const seconds = ("0" + date.getSeconds()).slice(-2);
                              return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
                            }

                                    var chart = new CanvasJS.Chart("download_overtime_day", {
                                    animationEnabled: true, 
                                    toolTip:{   
                                            contentFormatter: function (e) {
                                            var content = timeConverter(e.entries[0].dataPoint.x) + " : " + e.entries[0].dataPoint.y + " Template Downloaded";
                                            return content;
                                        }      
                                    }, 
                                    zoomEnabled: true, 
                                    title:{
                                        text: "Daily View (Past 24 Hours)"
                                    },
                                    theme: "light2",
                                    exportFileName: "Daily View (Past 24 Hours) - 2023-04-26 01:52:45",
                                    exportEnabled: true,
                                    backgroundColor: "",
                                    axisX: {
                                        title: "Hour of The Day",
                                        valueFormatString: "HH:mm:ss",
                                        labelAngle: -30
                                    },
                                    axisY: {
                                        title: "Downloads",
                                        valueFormatString: "#0",
                                        suffix: " Tem..",
                                        maximum: 6
                                    },
                                    data: [{
                                        type: "area",
                                        xValueType: "dateTime",
                                        dataPoints: [{"x":1682460000000,"y":0,"markerSize":0},{"x":1682463600000,"y":0,"markerSize":0},{"x":1682467200000,"y":0,"markerSize":0},{"x":1682470800000,"y":0,"markerSize":0},{"x":1682474400000,"y":0,"markerSize":0},{"x":1682478000000,"y":0,"markerSize":0},{"x":1682481600000,"y":0,"markerSize":0},{"x":1682485200000,"y":0,"markerSize":0},{"x":1682488800000,"y":0,"markerSize":0},{"x":1682492400000,"y":0,"markerSize":0},{"x":1682496000000,"y":0,"markerSize":0},{"x":1682499600000,"y":0,"markerSize":0},{"x":1682502686000,"y":1,"markerSize":13,"indexLabel":"1","indexLabelFontSize":13},{"x":1682503200000,"y":0,"markerSize":0},{"x":1682506800000,"y":0,"markerSize":0},{"x":1682510400000,"y":0,"markerSize":0},{"x":1682514000000,"y":0,"markerSize":0},{"x":1682517086000,"y":1,"markerSize":13,"indexLabel":"1","indexLabelFontSize":13},{"x":1682517600000,"y":0,"markerSize":0},{"x":1682521200000,"y":0,"markerSize":0},{"x":1682524800000,"y":0,"markerSize":0},{"x":1682528400000,"y":0,"markerSize":0},{"x":1682532000000,"y":0,"markerSize":0},{"x":1682535600000,"y":0,"markerSize":0},{"x":1682539200000,"y":0,"markerSize":0},{"x":1682542800000,"y":0,"markerSize":0}]
                                    }]
                                });

                                chart.render();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

<div id="download_overtime_day" style="height:400px;width:100%"></div>

此外,可以找到许多关于如何以多种方式处理时间序列数据的示例,例如以Date存储数据(不限于Unix Timestamp)。请找到here
希望能帮上忙:)!

相关问题