CanvasJS從數據顏色更改工具提示顏色

我正在使用canvas.js，它工作正常。我只是想改變tooltip的顏色。我試試以下代碼CanvasJS從數據顏色更改工具提示顏色

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

來源

2016-08-16 urfusion

你必須設置工具提示的backgroundColor來改變它的背景色。

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

請參考documentation。

來源

2016-08-16 05:40:44 Sanjoy

我想改變工具提示的顏色不是背景顏色。 – urfusion

您可以分享您的任何形象的要求，以便我們可以查看它並提供解決方案 – Sanjoy

我希望您可以檢查圖像工具提示'7/7/2016：20'中的日期與顏色不同圖形數據字段。像'20'現在有不同的顏色。 – urfusion

使用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>

來源

2016-08-16 06:08:27

正如你可以檢查我的代碼我正在使用屬性，但它不反映。 'Data（7/7/2016）'使用的是數據顏色，而'20'使用的是我通過tooltip提供的顏色'fontColor：「red」，'。代碼中有任何錯誤嗎？ – urfusion

我已將您的代碼本身和它的工作正常。你可以用你的問題創建一個jsfiddle（http://jsfiddle.net/canvasjs/QwZuf/），這樣我們就可以理解你的問題並幫助你解決問題。 –

CanvasJS從數據顏色更改工具提示顏色

回答

相關問題