有没有办法添加 html 标记以分别针对 Chartjs/Canvasjs 中的每一列？

Question

我希望我可以分别为每个数据集添加标记，以便我可以使用 css 更改颜色。

var ctx = document.getElementById("myChart").getContext("2d");
var data = {
        labels: ["(1)","(2)","(3)","(4)","(5)"],
        datasets: [
            {
                label: "Food Chart",
                fillColor: "#000066",
                strokeColor: "transparent",
                pointColor: "red",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(220,220,220,1)",
                data: calcChart(),
            }
        ]
    }
    var options = {
        scaleShowHorizontalLines: true,
        barValueSpacing : 5,
        scaleBeginAtZero : true,
        barValueSpacing : 25
    }
    var myBarChart = new Chart(ctx).Bar(data,options);

Answer 1

由于 Chart.js 和 Canvasjs 都使用 canvas 元素绘制图表，因此您无法使用 CSS.

与元素交互

如果您想对图表元素使用自定义 CSS，您将需要使用像 highcharts 这样的 SVG 库。

有没有办法添加 html 标记以分别针对 Chartjs/Canvasjs 中的每一列？

Is there a way to add html markup to target each column individually in Chartjs/Canvasjs?

html

javascript

canvasjs

chart.js