将全局选项传递到2.1.6/图表.js中的折线图

Question

这是我的jsfiddle解释我面临的问题。我想基本上传递选项对象（禁用填充和贝塞尔曲线），就像我在旧版本中所做的那样......

https://jsfiddle.net/xjdvngwe/

基本上我想实现将选项传递给图表创建图表时的函数

var options = { fill:false,tension:0, lineTension :0.1};
var chart_testChart = new Chart.Line(ctx, 
    { 
        data: data, 
        options: options 
    });

在最新版本 2.1.6 中，我无法让它工作

如果我像这样传递它们，它们工作正常，但我正在寻找一种方法将它们作为选项对象传递

var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
    {
        label: "My First dataset",
        fill: false,
        lineTension: 0.1,

Answer 1

这是因为您误解了图表的构建方式：

您认为fill和tension属性都直接位于选项的根目录中，但它们实际上位于options.element.line中。

有关更多信息，请查看有关元素配置的 Chart.js 文档（在您的情况下滚动直到线配置）。

---

但要小心！！不要混淆：

• 通过编辑传递给图表数据的数据集来编辑一个元素（就像您在问题的第二部分中所做的那样）：

  datasets: [
  {
      label: "My First dataset",
      fill: false,
      lineTension: 0.1,
      // ...
  }]
  

• 通过编辑图表选项来编辑相同类型的所有元素（此处为折线图）：

  var options = { elements: { line: { /*options */ } } };
  

  如我上面给出的文档中所述：

  可以为四种不同类型的元素配置选项：圆弧、直线、点和矩形。设置后，这些选项将应用于该类型的所有对象，除非被附加到数据集的配置明确覆盖。

因此，在直接在选项中编辑这些属性之前，请确保您确实想要编辑所有折线图。

---

现在，如果您仍然想在选项中进行编辑，则必须像这样构建options变量：

var options = { elements: { line: { fill: false, tension: 0.1 } } };
var chart_testChart = new Chart.Line(ctx, 
{ 
    data: data, 
    options: options 
});

如果你想看到结果，这是一个工作小提琴。