有没有一种方法可以动态地将带有标签的多行插入ChartJS折线图中

Is there a way to insert multiple lines, with labels, dynamically, into a ChartJS Line chart?

本文关键字：标签 折线图 ChartJS 插入 一种 方法 动态 有没有      更新时间：2023-09-26

我希望这是可能的，因为我一直在尝试找到一种方法来做到这一点，对js和ChartJS有一点了解。我希望调用addData并填充行，但我还没有找到映射每行对应标签的数据的方法。我的问题是，我通过JSON传递的对象都有不同的日期，用于不同的工资；

{
  "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 (var i = 0; i < details.length; i++)
{
   for (int j = 0; j < details[i].length; j++)
   {
       addStuffTodataArray(details[i].user[j]);
   }
    var lineData = {
        labels: labelArray,
        datasets: [
            {
                label: JsonData.user,
                fillColor: "rgba(220,220,220,0.2)",
                strokeColor: "rgba(220,220,220,1)",
                pointColor: "rgba(220,220,220,1)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(220,220,220,1)",
                data: dataArray 
            }
   }

目前，我将手动解决所有问题（即，使用jQuery获取用户指定的周期，并在指定的时间范围内运行，计算月份并为每个月份应用标签，然后分配值）。

我的新方法似乎需要大量的处理，我确信ChartJS会处理得更好。

提前谢谢。

下面是一个猜测。我还没有尝试过，但根据数据集的结构，我认为可以将数据集添加到数据数组中，然后调用update()；

//here's the new dataset you want to add
var myNewDataset = {
        label: "My third dataset",
        fillColor: "rgba(151,187,205,0.2)",
        strokeColor: "rgba(151,187,205,1)",
        pointColor: "rgba(151,187,205,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(151,187,205,1)",
        data: [28, 48, 40, 19, 86, 27, 90]
    };
//push that onto the datasets array
lineData.datasets.push(myNewDataset);
//call the update method to render the new data
myLineChart.update();

更新方法如下所述：http://www.chartjs.org/docs/#line-图表原型方法

您可能需要使用Chart.Stratter扩展(http://dima117.github.io/Chart.Scatter/)。这也从Chart.js文档链接到（请参阅http://www.chartjs.org/docs/#advanced-使用社区扩展）

Chart.Sscatter支持日期刻度，这将消除

现在，我要手动解决所有问题由用户使用jQuery指定的时间段，并贯穿整个时间指定的框架，计算月份并为每个月贴上标签一个，然后分配值）。

你正在做的（你仍然需要重新格式化你的数据结构，以适应Chart.Stratter所期望的数据结构）

我最终做了这样的事情；

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);
相关文章：