Javascript 有没有办法在ChartJS折线图中动态插入多条带标签的线条?
我希望这是可能的,因为我一直在试图找到一种方法来做到这一点,有点js和ChartJS的知识。我希望调用addData并填充行,但我还没有找到一种方法来映射每行对应标签的数据。我的问题是,我通过JSON传递的对象都有不同的日期和工资Javascript 有没有办法在ChartJS折线图中动态插入多条带标签的线条?,javascript,chart.js,Javascript,Chart.js,我希望这是可能的,因为我一直在试图找到一种方法来做到这一点,有点js和ChartJS的知识。我希望调用addData并填充行,但我还没有找到一种方法来映射每行对应标签的数据。我的问题是,我通过JSON传递的对象都有不同的日期和工资 { "details": [ { "user": [ { "amount": "15000", "startdate": "01/01/2012", "enddate":
{
"details": [
{
"user": [
{
"amount": "15000",
"startdate": "01/01/2012",
"enddate": "01/01/2012",
"id": "23",
}, {
"amount": "21000",
"startdate": "01/01/2013",
"end": "01/01/2012",
"id": "23",
}],
"user" : etc etc
}
然后,用js捕捉到这一点,并用类似的方式进行安排(我的实际代码要长得多,所以您可以看到我正在尝试做什么)
for(变量i=0;i
目前,我将手动计算所有内容(即,使用jQuery获取用户指定的时间段,并在指定的时间范围内运行,计算月份并为每个月份应用标签,然后分配值)
我的新方法似乎需要大量处理,我确信ChartJS会更好地处理这个问题
提前感谢。这里有一个猜测。我还没有尝试过,但是基于,我认为您可以向数据数组添加一个数据集,然后调用
update()
这里描述了更新方法:这里是一个猜测。我没有尝试过这个方法,但是基于,我认为您可以向数据数组添加一个数据集,然后调用
Update()
此处介绍了更新方法:您可能希望使用Chart.Scatter扩展名()。这也链接到Chart.js文档中的(请参阅) 散点图支持日期刻度,这将消除 目前,我将手动解决所有问题(即,获取 由用户使用jQuery指定的期间,并在整个时间内运行 指定的框架,计算月份并为每个月应用标签 一个,然后分配值)
您正在执行的操作(您仍然需要重新格式化数据结构以适应Chart.Scatter所需的数据结构)您可能需要使用Chart.Scatter扩展名()。这也链接到Chart.js文档中的(请参阅) 散点图支持日期刻度,这将消除 目前,我将手动解决所有问题(即,获取 由用户使用jQuery指定的期间,并在整个时间内运行 指定的框架,计算月份并为每个月应用标签 一个,然后分配值)
你正在做的事情(你仍然需要重新格式化你的数据结构,以适应Chart.Scatter所期望的数据结构)我最后做了类似的事情
lineChartData = {}; //declare an object
lineChartData.labels = []; //add 'labels' element to object (X axis)
lineChartData.datasets = []; //add 'datasets' array element to object
var moreData = [[1, 3, 6, 16, 30, 6], [3,2,3,5,1,2], [3,11,23,2,1,9]];
function getLabels()
{
var labels = ["one", "two", "three", "four", "five", "six"];
return labels;
}
for (line = 0; line < moreData.length; line++) {
y = [];
lineChartData.datasets.push({}); //create a new line dataset
dataset = lineChartData.datasets[line]
dataset.fillColor = "rgba(0,0,0,0)";
if (moreData[line][0] == 1){
dataset.strokeColor = "rgba(0,0,205,1)";
} else {
dataset.strokeColor = "rgba(200,200,200,1)";
}
dataset.data = []; //contains the 'Y; axis data
for (x = 0; x < getLabels().length; x++) {
labels = getLabels();
for (var k = 0; k < moreData[line].length; k++){
y.push( moreData[line][k]);
}
if (line === 0)
lineChartData.labels.push(labels[x]);
}
lineChartData.datasets[line].data = y;
}
ctx = document.getElementById("Chart1").getContext("2d");
myLineChart = new Chart(ctx).Line(lineChartData);
lineChartData={};//声明一个对象
lineChartData.labels=[];//将“labels”元素添加到对象(X轴)
lineChartData.datasets=[];//将“datasets”数组元素添加到对象
var moreData=[[1,3,6,16,30,6],[3,2,3,5,1,2],[3,11,23,2,1,9];
函数getLabels()
{
变量标签=[“一”、“二”、“三”、“四”、“五”、“六”];
退货标签;
}
用于(行=0;行
我最终做了这样的事情
lineChartData = {}; //declare an object
lineChartData.labels = []; //add 'labels' element to object (X axis)
lineChartData.datasets = []; //add 'datasets' array element to object
var moreData = [[1, 3, 6, 16, 30, 6], [3,2,3,5,1,2], [3,11,23,2,1,9]];
function getLabels()
{
var labels = ["one", "two", "three", "four", "five", "six"];
return labels;
}
for (line = 0; line < moreData.length; line++) {
y = [];
lineChartData.datasets.push({}); //create a new line dataset
dataset = lineChartData.datasets[line]
dataset.fillColor = "rgba(0,0,0,0)";
if (moreData[line][0] == 1){
dataset.strokeColor = "rgba(0,0,205,1)";
} else {
dataset.strokeColor = "rgba(200,200,200,1)";
}
dataset.data = []; //contains the 'Y; axis data
for (x = 0; x < getLabels().length; x++) {
labels = getLabels();
for (var k = 0; k < moreData[line].length; k++){
y.push( moreData[line][k]);
}
if (line === 0)
lineChartData.labels.push(labels[x]);
}
lineChartData.datasets[line].data = y;
}
ctx = document.getElementById("Chart1").getContext("2d");
myLineChart = new Chart(ctx).Line(lineChartData);
lineChartData={};//声明一个对象
lineChartData.labels=[];//将“labels”元素添加到对象(X轴)
lineChartData.datasets=[];//将“datasets”数组元素添加到对象
var moreData=[[1,3,6,16,30,6],[3,2,3,5,1,2],[3,11,23,2,1,9];
函数getLabels()
{
变量标签=[“一”、“二”、“三”、“四”、“五”、“六”];
退货标签;
}
用于(行=0;行
你是指图表上的多个数据集吗?如果是这样,你可以将其定义为一个数据集
数组,在它们的数组中,它们有两个数据集。否则,我不完全确定多行是什么意思。这看起来像是一个关于“如何为折线图设置数据”的问题,而不是实际插入的行。是的,
lineChartData = {}; //declare an object
lineChartData.labels = []; //add 'labels' element to object (X axis)
lineChartData.datasets = []; //add 'datasets' array element to object
var moreData = [[1, 3, 6, 16, 30, 6], [3,2,3,5,1,2], [3,11,23,2,1,9]];
function getLabels()
{
var labels = ["one", "two", "three", "four", "five", "six"];
return labels;
}
for (line = 0; line < moreData.length; line++) {
y = [];
lineChartData.datasets.push({}); //create a new line dataset
dataset = lineChartData.datasets[line]
dataset.fillColor = "rgba(0,0,0,0)";
if (moreData[line][0] == 1){
dataset.strokeColor = "rgba(0,0,205,1)";
} else {
dataset.strokeColor = "rgba(200,200,200,1)";
}
dataset.data = []; //contains the 'Y; axis data
for (x = 0; x < getLabels().length; x++) {
labels = getLabels();
for (var k = 0; k < moreData[line].length; k++){
y.push( moreData[line][k]);
}
if (line === 0)
lineChartData.labels.push(labels[x]);
}
lineChartData.datasets[line].data = y;
}
ctx = document.getElementById("Chart1").getContext("2d");
myLineChart = new Chart(ctx).Line(lineChartData);