Question

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

我尝试过，在两个图表所用的opt之后添加title ：。但这行不通。

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);
                });
            });
        }
    }
};

Answer 1

重要的步骤是对选项对象进行深拷贝。

写下要用于两个图表的选项。您无需在这里使用title: { ... }，因为稍后会覆盖它。

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

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

let options1 = JSON.parse(JSON.stringify(optionsDefault))
options1.title = {
  display: true,
  text: "Chart 1"
}
let options2 = JSON.parse(JSON.stringify(optionsDefault))
options2.title = {
  display: true,
  text: "Chart 2"
}

将两个选项都分配给图表。

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

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

1 个答案: