- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个 ionic 项目,正在使用以下库: http://gionkunz.github.io/chartist-js/index.html
真正绘制图表是通过以下实现的:
var chart = new Chartist.Line('.ct-chart', {
series: [
{
name: 'series-1',
data: [
{x: new Date(143134652600), y: 53},
{x: new Date(143234652600), y: 40},
{x: new Date(143340052600), y: 45},
{x: new Date(143366652600), y: 40},
{x: new Date(143410652600), y: 20},
{x: new Date(143508652600), y: 32},
{x: new Date(143569652600), y: 18},
{x: new Date(143579652600), y: 11}
]
},
{
name: 'series-2',
data: [
{x: new Date(143134652600), y: 53},
{x: new Date(143234652600), y: 35},
{x: new Date(143334652600), y: 30},
{x: new Date(143384652600), y: 30},
{x: new Date(143568652600), y: 10}
]
}
]
}, {
axisX: {
type: Chartist.FixedScaleAxis,
divisor: 5,
labelInterpolationFnc: function(value) {
return moment(value).format('MMM D');
}
}
});
使用 DIV:
<div class="ct-chart ct-perfect-fourth"></div>
我不想使用如上所示的系列硬编码数组,而是希望通过函数调用动态构建它。
我可以如何做到这一点的任何例子?
谢谢!
最佳答案
您可以使用生成函数生成具有一点随机性和一些固定变量的数据。参数化图表的创建可能也更好,以便以后更容易重新创建。 Chartist 也有一个 update()
可让您向其传递新数据和选项的函数,因此对此特别有用。
Javascript
var button = document.getElementById('button');
var options = {
axisX: {
type: Chartist.FixedScaleAxis,
divisor: 5,
labelInterpolationFnc: function(value) {
return moment(value).format('MMM D');
}
}
};
var chart; // initialise the chart variable
function createChart(){
chart = new Chartist.Line('.ct-chart', changeData(), options);
}
function updateChart(){
chart.update(changeData());
}
function changeData(){
var series = [];
// set up series ranges
var numberOfSeries = 2;
var numberOfItems = 8;
var startDate = 143134652600;
var endDate = 143579652600;
var minY = 11;
var maxY = 53;
// creates the 'step' each x-axis item should take
var dateDiff = Math.floor((endDate - startDate) / numberOfItems);
// alternatively set the step to a whole day etc. (makes endDate unnecessary)
// var dateDiff = 24 * 60 * 60 * 1000;
for(var x = 0; x < numberOfSeries; x++){
var seriesData = [];
for(var y = 0; y < numberOfItems; y++){
seriesData.push({
x: new Date(startDate + (dateDiff*y)),
y: getRandomInt(minY, maxY)
})
}
series.push({
name: 'series-'+ (x+1),
data: seriesData
});
}
// return the data to display in the chart
return {series:series};
}
/**
* Returns a random integer between min (inclusive) and max (inclusive)
* Using Math.round() will give you a non-uniform distribution!
*/
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
button.addEventListener('click', updateChart);
createChart(); // generate chart initially
HTML
<button id="button">
Change Data
</button>
<div class="ct-chart ct-perfect-fourth"></div>
关于javascript - Angular - 动态构建 JSON 以供图表师使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40731365/
什么是“导航”waitForNavigation等待? 网站导航?浏览器刷新图标“导航”以完成旋转? 或者这只是一个措辞笨拙的方法,应该命名为waitForBrowserToLoad ? 但是,当我使
我说的网址是https://www.vudu.com/content/movies/movieslist .我正在尝试滚动浏览电影所在的部分。当我使用以下代码时,它不起作用。 await page.e
我终于想通了如何使用 Node.js。安装了所有库/扩展。所以 puppeteer 正在工作,但就像以前使用 Xmlhttp 一样......它只获取页面的模板/正文,没有需要的信息。在浏览器(Web
我想划分两个 ull 变量并获得最准确的结果。最好的方法是什么? 即5000034/5000000 = 1.0000068 最佳答案 如果你想要“最准确的精度”——你应该避免浮点运算。 你可能想使用一
好的,我已经编程了大约一个星期了,我是从 C++ 开始的。我正在编写一个程序,它是一种算术训练器,你输入你想要的方程式的数量,你输入你对随机数生成器的限制,你指定你想要什么样的方程式(/* - +),
由于浪费了 2 周的时间,我尝试在 AWS Lambda 上安装 Puppeteer 但没有成功。 我试过: https://github.com/sambaiz/puppeteer-lambda-s
你好!在 python 中考虑以下内容: import math num = # Any float... div = # Any float... result_1 = math.floor(num
使用 puppeteer 时,我曾经通过使用以下代码行来获取新选项卡: const browser = await puppeteer.launch() const [page] = await br
如何使用 Puppeteer 检查 HTML 元素是否在视口(viewport)(可见区域)内可见?例如,如果我必须滚动才能看到一个按钮,那么它是不可见的。 page.waitForSelector(
如何将 headless 从假变为真? 如何隐藏浏览器? const browser = await puppeteer.launch({headless: false}) const page =
我无法使用 puppeteer 播放 Youtube 视频。 chromium 好像不支持视频播放。我该怎么办? 这是我的代码: const puppeteer = require('/root/no
需要一个 puppet 特工联系一些不同 puppet 师。 原因:不同的组创建了不同且独立的 list 集。 可能的组及其任务 应用程序供应商:应用程序的配置 安全性:强化 运营:路由表、监控工具
我的目标是获取 .textContent来自不同标签,每个都位于单独的 中. 我认为问题在于 table变量,因为我没有为 child 检查正确的变量。目前,data变量只获取第一个 , 所以 p
我尝试从多个页面截取屏幕截图,这些页面应该已完全加载(包括延迟加载的图像)以供以后比较。 我找到了 lazyimages_without_scroll_events.js example这很有帮助。
时不时地,一个页面会很挑剔,并且会出现这样的错误: UnhandledPromiseRejectionWarning: Error: Protocol error (Runtime.callFunct
我在 Linux 环境中,我想了解如何指定它应该用于 Chromium 的路径。目前,这是我遇到的错误: Chromium revision is not downloaded. Run "npm i
如何找到一个不起眼的单选按钮元素并在 puppeteer 中单击它? 我看过很多文章说“只需使用evaluate(),然后单击它”或类似的内容,但这在我的场景中不起作用。 这是我所拥有的: page.
问题来源:我无法按原样使用 Javascript,因为 Firebase Functions Node.Js 版本尚不支持 Async/Await。所以我把它放在 Typescript 中,现在正在尝
使用 Reactjs 开发的网站,在后端与以太坊智能合约进行交互。 此智能合约需要一个 chrome 扩展程序(metamask)进行交易。 现在,在使用 puppeteer 时,它在 chrome
var snd2 = new Audio("data:audio/wav;base64,//uQRAAAAWMSLwUIYAAsYkXgoQwAEaYLWfkWgAI0wWs/ItAAAGDgYtAg
我是一名优秀的程序员,十分优秀!