Chart.js 两个图表使用相同的选项，但我需要不同的图表标题

使用Chart.js，我声明了两个图表，使用相同的选项。我想有不同的标题的图表。但标题是在选项中声明的

我试过了，在两张图表中使用的选项后面加上标题。但这并不奏效

var ctx = document.getElementById("myChart");
myLineChart = new Chart(ctx, {
    type: 'horizontalBar',
    data: chartData,
    options: opt,
    title: {
        display: true,
        text: 'title',
    }
});

var ctx2 = document.getElementById("myChart2");
myLineChart = new Chart(ctx2, {
    type: 'horizontalBar',
    data: chartData2,
    options: opt,
    title: {
        display: true,
        text: 'title2',
    }
});

var选项包括：

var opt = {
    events: false,
    legend: {
        display: false
    },
    scales: {
        xAxes: [{
            ticks: {
                display: true,
                callback: function(value, index, values) {
                    return Intl.NumberFormat('$form->{countrycode}').format((value));
                }
            }
        }]
    },
    responsive: false,
    tooltips: {
        enabled: false
    },
    hover: {
        animationDuration: 0
    },
    animation: {
        duration: 1,
        onComplete: function() {
            var chartInstance = this.chart;
            ctx = chartInstance.ctx;
            ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
            ctx.textAlign = 'center';
            ctx.textBaseline = 'bottom';

            this.data.datasets.forEach(function(dataset, i) {
                var meta = chartInstance.controller.getDatasetMeta(i);
                meta.data.forEach(function(bar, index) {
                    var data = '$form->{currency}' + Intl.NumberFormat('$form->{countrycode}').format(dataset.data[index]);
                    ctx.fillText(data, bar._model.x + 10, bar._model.y - 1);
                });
            });
        }
    }
};

---

重要的一步是对options对象进行深度复制

写下你想用于两个图表的选项。这里不需要

title:{…}

，因为稍后您将覆盖它

let optionsDefault = {
  responsive: true,
  scales: { ... }
  // ...
}

深度复制两个图表的选项（JSON.parse&stringify只是深度克隆的一种方法，请查看有关深度克隆的更多信息）

将这两个选项都指定给图表

let chart1 = new Chart(ctx1, {
  type: "line",
  data: data,
  options: options1
});
let chart2 = new Chart(ctx2, {
  type: "line",
  data: data,
  options: options2
});

---

重要的一步是对options对象进行深度复制

写下你想用于两个图表的选项。这里不需要

title:{…}

，因为稍后您将覆盖它

let optionsDefault = {
  responsive: true,
  scales: { ... }
  // ...
}

深度复制两个图表的选项（JSON.parse&stringify只是深度克隆的一种方法，请查看有关深度克隆的更多信息）

将这两个选项都指定给图表

let chart1 = new Chart(ctx1, {
  type: "line",
  data: data,
  options: options1
});
let chart2 = new Chart(ctx2, {
  type: "line",
  data: data,
  options: options2
});

---

非常感谢。成功了！虽然我在optionsDefault中定义的值的格式已经不起作用了。嗯，你能解释一下你改变了什么，甚至有一个新的版本吗？另一个选项是使用chart1的默认选项，克隆它们，并使用修改后的版本和chart2的新标题。这种方法只需要一次克隆，代码更短，但代码可读性会降低。但是您可以通过这种方式发现chart1和chart2的格式是否存在差异。谢谢！，成功了！虽然我在optionsDefault中定义的值的格式已经不起作用了。嗯，你能解释一下你改变了什么，甚至有一个新的版本吗？另一个选项是使用chart1的默认选项，克隆它们，并使用修改后的版本和chart2的新标题。这种方法只需要一次克隆，代码更短，但代码可读性会降低。但您可以通过这种方式发现chart1和chart2的格式是否存在差异。