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

你必须设置工具提示的backgroundColor来改变它的背景色。

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

请参考documentation。

Answer 2

使用fontColor属性，您可以自定义工具提示的字体颜色。

这里是你的代码和结果。

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>