如何在Chartjs上设置自定义模板?

时间:2016-01-21 05:54:59

标签: javascript angularjs

我正在使用ChartJS的折线图和the Angular extension的插件。

我在尝试编辑工具提示时遇到困难,因此根据我需要创建自定义模板以实现我需要的文档

这是我到目前为止所拥有的

enter image description here

如你所见有工具提示,但它没有显示我需要的东西,我需要显示如下内容:

  

$ AMOUNT(总计)

所以在这种情况下它应该是:

  

$ 150(1)

得到了吗?

查看我的代码

      $scope.labels = Object.keys(data);
      $scope.seriesConv = ["amount"];
      $scope.dataConv = $scope.seriesConv.map(function(serie) {
        return $scope.labels.map(function(label) {
          $scope.trafficSource = Object.keys(data[label])[0];
          $scope.chartOptions = {
            tooltipTemplate: "<%= '$' + value %>",
          };
          return data[label][$scope.trafficSource].conversions.amount;
        });
      });

和html

   <canvas id="line" class="chart chart-line"
           height="100" chart-options="chartOptions"
           chart-data="dataConv" chart-labels="labels">
   </canvas>

这是我收到的数据

{
  "12-15-2015": {
    "55f6de98f0a50c25f7be4db0": {
      "conversions": {
        "total": 0,
        "amount": 0
      },
      "clicks": {
        "total": 8,
        "real": 1
      }
    }
  },
  "12-16-2015": {
    "55f6de98f0a50c25f7be4db0": {
      "conversions": {
        "total": 0,
        "amount": 0
      },
      "clicks": {
        "total": 18,
        "real": 1
      }
    }
  },
  "12-17-2015": {
    "55f6de98f0a50c25f7be4db0": {
      "conversions": {
        "total": 1,
        "amount": 22
      },
      "clicks": {
        "total": 12,
        "real": 1
      }
    }
  },
  "12-18-2015": {
    "55f6de98f0a50c25f7be4db0": {
      "conversions": {
        "total": 0,
        "amount": 0
      },
      "clicks": {
        "total": 6,
        "real": 1
      }
    }
  },
  "12-19-2015": {
    "55f6de98f0a50c25f7be4db0": {
      "conversions": {
        "total": 0,
        "amount": 0
      },
      "clicks": {
        "total": 12,
        "real": 1
      }
    }
  },
  "12-20-2015": {
    "55f6de98f0a50c25f7be4db0": {
      "conversions": {
        "total": 0,
        "amount": 0
      },
      "clicks": {
        "total": 10,
        "real": 1
      }
    }
  },
  "12-21-2015": {
    "55f6de98f0a50c25f7be4db0": {
      "conversions": {
        "total": 1,
        "amount": 22
      },
      "clicks": {
        "total": 1,
        "real": 1
      }
    }
  },
  "12-22-2015": {
    "55f6de98f0a50c25f7be4db0": {
      "conversions": {
        "total": 1,
        "amount": 150
      },
      "clicks": {
        "total": 1,
        "real": 1
      }
    }
  },
  "12-26-2015": {
    "55f6de98f0a50c25f7be4db0": {
      "conversions": {
        "total": 0,
        "amount": 0
      },
      "clicks": {
        "total": 4,
        "real": 1
      }
    }
  },
  "12-28-2015": {
    "55f6de98f0a50c25f7be4db0": {
      "conversions": {
        "total": 0,
        "amount": 0
      },
      "clicks": {
        "total": 1,
        "real": 1
      }
    }
  },
  "12-29-2015": {
    "55f6de98f0a50c25f7be4db0": {
      "conversions": {
        "total": 0,
        "amount": 0
      },
      "clicks": {
        "total": 1,
        "real": 1
      }
    }
  },
  "01-03-2016": {
    "55f6de98f0a50c25f7be4db0": {
      "conversions": {
        "total": 0,
        "amount": 0
      },
      "clicks": {
        "total": 2,
        "real": 1
      }
    }
  },
  "01-04-2016": {
    "55f6de98f0a50c25f7be4db0": {
      "conversions": {
        "total": 0,
        "amount": 0
      },
      "clicks": {
        "total": 3,
        "real": 1
      }
    }
  },
  "01-05-2016": {
    "55f6de98f0a50c25f7be4db0": {
      "conversions": {
        "total": 0,
        "amount": 0
      },
      "clicks": {
        "total": 6,
        "real": 1
      }
    }
  },
  "01-06-2016": {
    "55f6de98f0a50c25f7be4db0": {
      "conversions": {
        "total": 0,
        "amount": 0
      },
      "clicks": {
        "total": 6,
        "real": 1
      }
    }
  },
  "01-10-2016": {
    "55f6de98f0a50c25f7be4db0": {
      "conversions": {
        "total": 0,
        "amount": 0
      },
      "clicks": {
        "total": 1,
        "real": 1
      }
    }
  },
  "01-11-2016": {
    "55f6de98f0a50c25f7be4db0": {
      "conversions": {
        "total": 0,
        "amount": 0
      },
      "clicks": {
        "total": 2,
        "real": 1
      }
    }
  },
  "01-14-2016": {
    "55f6de98f0a50c25f7be4db0": {
      "conversions": {
        "total": 0,
        "amount": 0
      },
      "clicks": {
        "total": 22,
        "real": 1
      }
    }
  }
}

现在我只是在玩对象的"conversions : {}部分,其中包含totalamount

所以根据这些链接的文档,您认为我应该做些什么才能实现我想要的目标?

0 个答案:

没有答案