CanvasJS从数据颜色更改工具提示颜色

Question

我正在使用canvas.js ，并且工作正常。 我只想更改tooltip的颜色。 我尝试以下代码

 toolTip: {
            enabled: true,
            animationEnabled: true,
            fontColor: "red",
            Content: "{x} : {y}",
          },

通过它不会改变整个工具提示的颜色。 我怎样才能做到这一点。

这是我的JS

var chartResponses = new CanvasJS.Chart("chartResponses", {
                animationEnabled: true,
                toolTip: {
                    enabled: true,
                    animationEnabled: true,
                    fontColor: "red",
                    Content: "{x} : {y}",
                    color: "rgba(0, 0, 0, 0.25)",
                },
                axisX: {
                    titleFontFamily: "verdana",
                    valueFormatString: "D/M/YYYY",
                    tickThickness: 0,
                    lineThickness: 1,
                    gridThickness: 0,
                    gridColor: "#f2f6f7",
                    lineColor: "#f2f6f7",
                    labelFontColor: "#8fa2aa",
                    labelFontSize: 12
                },
                axisY: {
                    titleFontFamily: "verdana",
                    valueFormatString: "0",
                    tickThickness: 0,
                    lineThickness: 0,
                    gridThickness: 1,
                    gridColor: "#f2f6f7",
                    lineColor: "#f2f6f7",
                    labelFontColor: "#8fa2aa",
                    labelFontSize: 12
                },
                data: [{
                        type: "splineArea",
                        showInLegend: true,
                        markerSize: 0,
                        name: "",
                        color: "rgba(29, 176, 237, 0.25)",
                        dataPoints: allResponses
                    }],
            });

    chartResponses.render();

Answer 1

您必须设置toolTip的backgroundColor才能更改其背景色。

var  chart =  new  CanvasJS.Chart("container",
{
 .
 .
 toolTip:{
  backgroundColor: "#f4d5a6",
 },
 .
 .
});
chart.render();

请参考文档 。

Answer 2

使用fontColor属性，可以自定义toolTip的字体颜色。

这是您的代码和结果。

 var chart = new CanvasJS.Chart("chartContainer", { toolTip: { enabled: true, animationEnabled: true, fontColor: "red", Content: "{x} : {y}", color: "rgba(0, 0, 0, 0.25)", }, axisX: { titleFontFamily: "verdana", valueFormatString: "D/M/YYYY", tickThickness: 0, lineThickness: 1, gridThickness: 0, gridColor: "#f2f6f7", lineColor: "#f2f6f7", labelFontColor: "#8fa2aa", labelFontSize: 12 }, axisY: { titleFontFamily: "verdana", valueFormatString: "0", tickThickness: 0, lineThickness: 0, gridThickness: 1, gridColor: "#f2f6f7", lineColor: "#f2f6f7", labelFontColor: "#8fa2aa", labelFontSize: 12 }, data: [{ type: "splineArea", showInLegend: true, markerSize: 0, name: "", color: "rgba(29, 176, 237, 0.25)", dataPoints: [ { x: new Date(2016,08,01), y: 40 }, { x: new Date(2016,08,02), y: 30 }, { x: new Date(2016,08,03), y: 60 }, { x: new Date(2016,08,04), y: 80 }, { x: new Date(2016,08,05), y: 50 }, { x: new Date(2016,08,06), y: 90 }, { x: new Date(2016,08,07), y: 30 }, { x: new Date(2016,08,08), y: 40 }, { x: new Date(2016,08,09), y: 70 } ] }] }); chart.render(); 

 <script type="text/javascript" src="http://canvasjs.com/assets/script/canvasjs.min.js"></script> <div id="chartContainer" style="height: 260px; width: 100%;"></div>