问题：
使用Chart.js创建多折线图
田远
我正在尝试使用图表创建多行图表。js
我可以使用固定的数据结构对1行和2行执行此操作，但我无法使用多行来显示传递给数据结构的数据。
下面是从图表中缩写出来的示例用法。js网站
http://www.chartjs.org/docs/#getting-started
var myLineChart = new Chart(ctx).Line(data);
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
data: [65, 59, 80, 81, 56, 55, 40]
},
{fillColor: "rgba(151,187,205,0.2)",
strokeColor: "rgba(151,187,205,1)",
data: [28, 48, 40, 19, 86, 27, 90]
}
]};
现在我的代码，
lineChartData = {}; //declare an object
lineChartData.labels = []; //add 'labels' element to object (X axis)
lineChartData.datasets = []; //add 'datasets' array element to object
dataset = {}; //a single dataset is an object
dataset.fillColor = "rgba(0,0,0,0)";
dataset.strokeColor = "rgba(200,200,200,1)";
dataset.data = []; //contains the 'Y; axis data
for (line = 0; line < 4; line++) {
y = [];
lineChartData.datasets.push(dataset); //create a new line dataset
for (x = 0; x < 10; x++) {
y.push(line + x); //push some data aka generate 4 distinct separate lines
lineChartData.labels += x; //adds x axis labels
} //for x
lineChartData.datasets[line].data = y; //send new line data to dataset
} //for line
ctx = document.getElementById("Chart1").getContext("2d");
myLineChart = new Chart(ctx).Line(lineChartData);
}
图表始终显示相同的最后生成的行4次。
我是javascript新手，我确信我在创建对象结构时犯了一些错误，我花了一天的时间试图解决这个问题
有一个chart.js选项添加值如下，我应该使用这个
.添加数据（值数组、标签）
共有2个答案
康文昌
<script type="text/javascript">
$(document).ready(function () {
debugger;
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "CampComparison.aspx/getLineChartDataload",
data:{},
async: true,
cache: false,
dataType: "json",
success: OnSuccess_,
error: OnErrorCall_
})
function OnSuccess_(reponse) {
var aData = reponse.d;
var aLabels = aData[0];
var aDatasets1 = aData[1];
var aDatasets2 = aData[2];
var aDatasets3 = aData[3];
var aDatasets4 = aData[4];
var aDatasets5 = aData[5];
var lineChartData = {
labels: aLabels,
datasets: [
{
label: "Data1",
//fill:false,
fillColor: "rgba(0,0,0,0)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(200,122,20,1)",
data: aDatasets1
},
{
label: "Data2",
fillColor: 'rgba(0,0,0,0)',
strokeColor: 'rgba(220,180,0,1)',
pointColor: 'rgba(220,180,0,1)',
data: aDatasets2
},
{
label: "Data5",
fillColor: "rgba(0,0,0,0)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(152,188,204,1)",
data: aDatasets3
},
{
label: "Data4",
fillColor: 'rgba(0,0,0,0)',
strokeColor: 'rgba(151,187,205,1)',
pointColor: 'rgba(151,187,205,1)',
data: aDatasets4
},
{
label: "Data4",
fillColor: 'rgba(0,0,0,0)',
strokeColor: 'rgba(151,187,205,1)',
pointColor: 'rgba(151,187,205,1)',
data: aDatasets5
},
]
}
Chart.defaults.global.animationSteps = 50;
Chart.defaults.global.tooltipYPadding = 16;
Chart.defaults.global.tooltipCornerRadius = 0;
Chart.defaults.global.tooltipTitleFontStyle = "normal";
Chart.defaults.global.tooltipFillColor = "rgba(0,160,0,0.8)";
Chart.defaults.global.animationEasing = "easeOutBounce";
Chart.defaults.global.responsive = true;
Chart.defaults.global.scaleLineColor = "black";
Chart.defaults.global.scaleFontSize = 16;
//lineChart.destroy();
//document.getElementById("canvas").innerHTML = ' ';
//document.getElementById("chartContainer").innerHTML = ' ';
//document.getElementById("chartContainer").innerHTML = '<canvas id="canvas" style="width: 650px; height: 350px;"></canvas>';
//var ctx = document.getElementById("canvas").getContext("2d");
//ctx.innerHTML = "";
//var pieChartContent = document.getElementById('pieChartContent');
//pieChartContent.innerHTML = ' ';
//$('#pieChartContent').append('<canvas id="canvas" width="650px" height="350px"><canvas>');
//ctx = $("#canvas").get(0).getContext("2d");
var ctx = document.getElementById("canvas").getContext("2d");
var lineChart = new Chart(ctx).Line(lineChartData, {
bezierCurve: true,
chartArea: { width: '62%' },
responsive: true,
pointDotRadius: 10,
scaleShowVerticalLines: false,
scaleGridLineColor: 'black'
});
}
function OnErrorCall_(repo) {
//alert(repo);
}
});
//});
</script>
C#code
--------
[WebMethod(EnableSession = true)]
public static List<object> getLineChartDataload()
{
List<object> iData = new List<object>();
List<string> labels = new List<string>();
string advertiserid = HttpContext.Current.Session["AccountID"].ToString();
if (!string.IsNullOrEmpty(advertiserid))
{
// string StartDate = DateTime.Now.AddDays(-180).ToString("yyyy-MM-dd");
string StartDate = DateTime.Now.AddDays(-60).ToString("yyyy-MM-dd");
string EndDate = DateTime.Now.ToString("yyyy-MM-dd");
string strcampaignid = string.Empty;
DataTable dt = new DataTable();
int i = 0;
chatBL objcampid = new chatBL();
string query = "select distinct top 3 Campaignid,CampaignName from campaign where advertiserid='" + advertiserid + "' order by CampaignName";
dt = objcampid.commonFuntionGetData2(query);
foreach (DataRow drow in dt.Rows)
{
strcampaignid += drow["Campaignid"].ToString() + ",";
}
if (!string.IsNullOrEmpty(strcampaignid))
{
strcampaignid = strcampaignid.Substring(0, strcampaignid.Length - 1);
}
string[] campaignid = strcampaignid.Split(',');
//First get distinct Month Name for select Year.
// string query1 = "select top 10 cast(createddatetime as date) as month_name from advertiser where CurrentBal>0 order by CurrentBal";
//query1 += " ";
// query1 += " order by month_number;";
foreach (string strcamp in campaignid)
{
if (i == 0)
{
chatBL objblabel = new chatBL();
// DataTable dtLabels = objblabel.Topupmonthly("5E8EF1E9-67BF-489C-84CB-AFF0BB0FE707", "2015-09-18", "2016-02-25", "months");
DataTable dtLabels = objblabel.Topupmonthly2(strcamp, StartDate, EndDate, "months");
foreach (DataRow drow in dtLabels.Rows)
{
labels.Add(drow["InsDateTime"].ToString().Substring(2, 7));
}
iData.Add(labels);
}
// string query_DataSet_1 = "select top 10 CurrentBal from advertiser where CurrentBal>0 order by CurrentBal";
//query_DataSet_1 += " (orders_quantity) as total_quantity from mobile_sales ";
//query_DataSet_1 += " where YEAR(orders_date)='" + year + "' and mobile_id='" + mobileId_one + "' ";
//query_DataSet_1 += " group by month(orders_date) ";
//query_DataSet_1 += " order by month_number ";
chatBL objbl = new chatBL();
DataTable dtDataItemsSets_1 = objbl.Topupmonthly2(strcamp, StartDate, EndDate, "months");
List<double> lst_dataItem_1 = new List<double>();
foreach (DataRow dr in dtDataItemsSets_1.Rows)
{
lst_dataItem_1.Add(Convert.ToDouble(dr["CPACOUNT"].ToString()));
}
iData.Add(lst_dataItem_1);
//string query_DataSet_2 = "select top 10 Totalspent from advertiser where CurrentBal>0 order by CurrentBal";
//query_DataSet_2 += " (orders_quantity) as total_quantity from mobile_sales ";
//query_DataSet_2 += " where YEAR(orders_date)='" + year + "' and mobile_id='" + mobileId_two + "' ";
//query_DataSet_2 += " group by month(orders_date) ";
//query_DataSet_2 += " order by month_number ";
//chatBL objbl1 = new chatBL();
//DataTable dtDataItemsSets_2 = objbl1.Topupmonthly("5E8EF1E9-67BF-489C-84CB-AFF0BB0FE707", "2015-09-18", "2016-02-25", "months");
//List<double> lst_dataItem_2 = new List<double>();
//foreach (DataRow dr in dtDataItemsSets_2.Rows)
//{
// lst_dataItem_2.Add(Convert.ToDouble(dr["CPACOUNT"].ToString()));
//}
//iData.Add(lst_dataItem_2);
i = i + 1;
}
}
return iData;
}
章稳
您正在创建在数据集的所有4个位置插入相同对象（数据集）。所以循环中的任何操作都是在所有数组元素上完成的（实际上更准确的说法是，它是在数据集上完成的，数据集在数组的所有4个索引上）
请注意，在下面的代码中，{}对象文字实际上被插入数组4次，每次都给您一个新的元素。
lineChartData = {}; //declare an object
lineChartData.labels = []; //add 'labels' element to object (X axis)
lineChartData.datasets = []; //add 'datasets' array element to object
for (line = 0; line < 4; line++) {
y = [];
lineChartData.datasets.push({}); //create a new line dataset
dataset = lineChartData.datasets[line]
dataset.fillColor = "rgba(0,0,0,0)";
dataset.strokeColor = "rgba(200,200,200,1)";
dataset.data = []; //contains the 'Y; axis data
for (x = 0; x < 10; x++) {
y.push(line + x); //push some data aka generate 4 distinct separate lines
if (line === 0)
lineChartData.labels.push(x); //adds x axis labels
} //for x
lineChartData.datasets[line].data = y; //send new line data to dataset
} //for line
ctx = document.getElementById("Chart1").getContext("2d");
myLineChart = new Chart(ctx).Line(lineChartData);
// for chart.js 2.0 the following will be to create `myLineChart`
// myLineChart = new Chart(ctx1, {
// type: 'line',
// data: lineChartData,
// });
我还为你的标签做了一个小改动-你只需要一套标签。
打个比方，原始代码就是这样做的
Series a = new Series()
Array chartData = []
for (var i = 0; i < 4; i++) {
chartData.add(a);
-- some modifications on a ---
}
最后，基本上有一个数组，其中有4个指针指向同一个对象a。
小提琴-http://jsfiddle.net/tk78bosy/
类似资料：
-
我正在使用chart.js在一个页面上显示多个折线图。然而，只有最后一张图表显示，尽管我称之为“canvas1”和“canvas2”。有些地方一定有冲突，我试过很多东西，但没有任何乐趣。以下是两个图表，仅显示最后一个： 图一 图二： 你的帮助将不胜感激，已经打扰我一段时间了！ 提前谢谢
-
我刚到姜戈。我目前正在通过推特应用编程接口对实时用户推文进行情感分析。我已经设法做了分析和表达情感。现在，我想在我的Django应用程序中使用图表（也许是条形图或饼图）来可视化情感，但我不确定如何实现。 我在考虑使用图表。js使其具有响应性，但大多数示例都使用静态数据，因此我没有成功地将从Twitter API提取的数据与图表集成。js。 这是我的网页截图。这张表格是摘录的推特及其相应的情感。然而
-
抱歉，如果这不是正确的提问方式。我没有“声誉50”来评论对同一个问题的回答，礼节上说我不应该用一个问题来“回答”。 我有相同的问题，如使用添加数据到折线图chart.js但解决方案不适合我。我正在运行一个较新版本的Chart.js（1.0.1-beta.4），我已经尝试了旧版本1.0.1-beta.3建议。除了addData（），一切都为我工作。我已经注释了其他有效的方法。 顺便说一句，我不清楚a
-
我创建了一个json文件使用python这是一个列表。每个子列表都有chart.js图表的数据，即对于x和y轴，具有和。 这是包含列表和子列表的json。 下面的代码创建了一个图表，但我希望遍历所有条目，并为每个子列表（图表的多个实例）创建图表。 如何循环遍历下面代码中列出的json文件并创建多个chart.js图表？i、 e.，等的图表。
-
我想创建一个包含三条线（男性、女性、未知）的折线图。这是我的数据示例： 是否有一个选项，在图中自动创建三行或我需要循环通过数据和创建三个跟踪自己？到目前为止，这是我的代码：
-
我需要在我的Android应用中画一张“闭图”，像这样： 数据的xIndex先增加后减少。如本例所示： 当我尝试用MPAndroidChart中的数据绘制一条线时，它只呈现数据的前半部分（在xIndex下降之前）。其他数据未显示。 我怎样才能用MPAndroidChart正确地绘制这个数据呢？