- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个图表,它不是从 0 开始的。
这是我的图表和样本数据
am4core.useTheme(am4themes_animated);
var chart = am4core.create("chartdiv", am4charts.XYChart);
chart.dataSource.url = "https://api.myjson.com/bins/109xmw";
chart.dataSource.events.on("parseended", function(ev) {
var data = ev.target.data;
data.sort(function(lhs, rhs) {
return lhs.time - rhs.time;
});
data.forEach(function(item) {
item.time *= 1000;
});
});
chart.numberFormatter.numberFormat = "#.0b";
chart.dateFormatter.inputDateFormat = "x";
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.dateFormats.setKey("minute", "d MMM, \nHH:mm");
dateAxis.periodChangeDateFormats.setKey("minute", "d MMM, \nHH:mm");
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.tooltip.disabled = true;
var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.dateX = "time";
series.name = "Traffic out";
series.dataFields.valueY = "outDiffFormatted";
series.tooltipHTML = "<span style='font-size:14px; color:#000000;'><b>{valueY.value}/s</b></span>";
series.tooltipText = "[#000]{valueY.value}[/]";
series.tooltip.background.fill = am4core.color("#FFF");
series.tooltip.getStrokeFromObject = true;
series.tooltip.background.strokeWidth = 3;
series.tooltip.getFillFromObject = false;
series.fillOpacity = 0.6;
series.strokeWidth = 2;
series.stacked = false;
var series2 = chart.series.push(new am4charts.LineSeries());
series2.dataFields.dateX = "time";
series2.name = "Traffic in";
series2.dataFields.valueY = "inDiffFormatted";
series2.tooltipHTML = "<span style='font-size:14px; color:#000000;'><b>{valueY.value}/s</b></span>";
series2.tooltipText = "[#000]{valueY.value}[/]";
series2.tooltip.background.fill = am4core.color("#FFF");
series2.tooltip.getFillFromObject = false;
series2.tooltip.getStrokeFromObject = true;
series2.tooltip.background.strokeWidth = 3;
series2.sequencedInterpolation = true;
series2.fillOpacity = 0.5;
series2.stacked = false;
series2.strokeWidth = 2;
chart.cursor = new am4charts.XYCursor();
chart.cursor.xAxis = dateAxis;
chart.scrollbarX = new am4core.Scrollbar();
chart.legend = new am4charts.Legend();
chart.legend.position = "top";
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
#chartdiv {
width: 100%;
height: 500px;
}
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv"></div>
我不明白为什么我有这个空白区域。
最佳答案
设置dateAxis.startLocation = 0.5;
和dateAxis.endLocation = 0.5;
,表示显示前半部分和尾半部分,使得系列向右延伸到绘图区域的边缘。
更多相关信息:https://www.amcharts.com/docs/v4/concepts/axes/positioning-axis-elements/
am4core.useTheme(am4themes_animated);
var chart = am4core.create("chartdiv", am4charts.XYChart);
chart.dataSource.url = "https://api.myjson.com/bins/109xmw";
chart.dataSource.events.on("parseended", function(ev) {
var data = ev.target.data;
data.sort(function(lhs, rhs) {
return lhs.time - rhs.time;
});
data.forEach(function(item) {
item.time *= 1000;
});
});
chart.numberFormatter.numberFormat = "#.0b";
chart.dateFormatter.inputDateFormat = "x";
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.dateFormats.setKey("minute", "d MMM, \nHH:mm");
dateAxis.periodChangeDateFormats.setKey("minute", "d MMM, \nHH:mm");
dateAxis.startLocation = 0.5;
dateAxis.endLocation = 0.5;
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.tooltip.disabled = true;
var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.dateX = "time";
series.name = "Traffic out";
series.dataFields.valueY = "outDiffFormatted";
series.tooltipHTML = "<span style='font-size:14px; color:#000000;'><b>{valueY.value}/s</b></span>";
series.tooltipText = "[#000]{valueY.value}[/]";
series.tooltip.background.fill = am4core.color("#FFF");
series.tooltip.getStrokeFromObject = true;
series.tooltip.background.strokeWidth = 3;
series.tooltip.getFillFromObject = false;
series.fillOpacity = 0.6;
series.strokeWidth = 2;
series.stacked = false;
var series2 = chart.series.push(new am4charts.LineSeries());
series2.dataFields.dateX = "time";
series2.name = "Traffic in";
series2.dataFields.valueY = "inDiffFormatted";
series2.tooltipHTML = "<span style='font-size:14px; color:#000000;'><b>{valueY.value}/s</b></span>";
series2.tooltipText = "[#000]{valueY.value}[/]";
series2.tooltip.background.fill = am4core.color("#FFF");
series2.tooltip.getFillFromObject = false;
series2.tooltip.getStrokeFromObject = true;
series2.tooltip.background.strokeWidth = 3;
series2.sequencedInterpolation = true;
series2.fillOpacity = 0.5;
series2.stacked = false;
series2.strokeWidth = 2;
chart.cursor = new am4charts.XYCursor();
chart.cursor.xAxis = dateAxis;
chart.scrollbarX = new am4core.Scrollbar();
chart.legend = new am4charts.Legend();
chart.legend.position = "top";
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
#chartdiv {
width: 100%;
height: 320px;
}
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv"></div>
关于javascript - amcharts 4 : Removing side padding on graphic starting point,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55848990/
我刚刚注意到 align-self 属性的一些值,这是我以前从未见过的。什么是start、end、self-start、self-end,它们与有什么区别>flex-start 和 flex-end?
我见过程序员使用公式 mid = start + (end - start) / 2 而不是使用更简单的公式 mid = (start + end) / 2 用于查找数组或列表中的中间元素。 为什么他
我们已经设置了一个小型 AZURE VM(由 Microsoft 提供的普通 Windows 2012 R2 镜像),其中包含一个轻量级 DEMO 应用程序,该应用程序可以与 SQLExpress 和
我在笔记本电脑上安装了Xampp 3.2.1版,之前MySQL在它上面运行得很好,但突然MySQL停止运行,而阿帕奇和其他公司都在运行。当我点击开始MySQL时,它显示这个错误我使用Windows 1
我希望我能解释清楚。 我有自动生成的代码,我希望用 CSS 覆盖它。 这是我希望覆盖的代码示例: #u1150:hover #u1153-4 p {color: red} 重要提示:此代码中的“u”将
在我的 package.json 中,我有以下脚本 block : "scripts": { "start": "react-scripts start",
https://github.com/lodash/lodash/blob/3.7.0/lodash.src.js#L2781 此代码段 start = start == null 中的 +start
上下文 我一直在阅读有关如何将 TUMBLINGWINDOW 函数与 TIMSTAMP BY 子句一起使用的文档,但似乎找不到有关如何计算包含 TUMBLING WINDOW 和 TIMESTAMP
我正在使用 Grunt 运行 Protractor 端到端测试用例。我有以下三个任务(我使用的是 windows 7 机器) webdriver-stop webdriver-start Protra
我正在创建一个简单的Java程序,它具有在窗口生成器的帮助下构建的GUI。 GUI只包含一个按钮。 单击按钮后,启动一个线程,该线程将无限次打印到随机数,直到再次单击同一按钮将其停止为止。 这是我的代
我一直在摆弄创建一个运行渲染的线程,并且我遇到了这种实现它的方法: Class Main implements Runnable { private Thread thread; private bo
我如何在 StartButton 类中编写一个 touchesBegun 命令,它在场景中调用 start() 任何实例本身? 我知道......可能是 OOP 101。但今天我远远超出了我的范围。
关闭。这个问题需要更多 focused .它目前不接受答案。 想改进这个问题?更新问题,使其仅关注一个问题 editing this post . 8年前关闭。 Improve this questi
我的目标是运行多个进程并保存它们的 ProcessName和 Id供以后使用。这是我的代码 [System.Collections.ArrayList]$startedProcesses = @()
我在 8086 汇编方面没有太多经验,我想知道如果您不写起始标签 (start:) 和该标签的结尾,程序会发生什么 (end start)(围绕执行代码的标签)? 所以我的问题是这个标签是否是执行所必
我在 8086 汇编方面没有太多经验,我想知道如果您不写起始标签 (start:) 和该标签的结尾,程序会发生什么 (end start)(围绕执行代码的标签)? 所以我的问题是这个标签是否是执行所必
我想在另一个脚本的 Start() 之前从一个脚本运行 Start()。是否可以?您可以选择脚本的执行顺序吗? 最佳答案 我不太确定 Start() 但您可以配置 Awake 的脚本执行顺序,OnEn
我有一个来自 Unity 文档页面的示例程序,其中包含 IEnumerator Start() ,如下所示,但我想知道如何才能拥有正常的 void Start() > 在同一个脚本中? 我也尝试添加v
正如标题所说,“从机启动”和“从机启动”有什么区别?当我接受DBA面试时,他问了这个问题,我搜索了google但没有找到答案,有人知道吗? 最佳答案 没有区别.. Slave start; 已弃用,现
我有几十个未记录的表,文档说未记录的表在崩溃或不正常关机后会自动截断。 基于此,我需要在数据库启动后检查一些表,看它们是否为“空”并采取一些措施。 简而言之,我需要在数据库启动后立即执行一个过程。 最
我是一名优秀的程序员,十分优秀!