使用CSS/JavaScript更改劍道圖表工具提示文字顏色

我所有圖表的工具提示的文字顏色均爲黑色，這與我的圖表顏色無法正常工作。我一直在嘗試使用CSS將顏色更改爲白色，但不知何故，它不會改變。使用CSS/JavaScript更改劍道圖表工具提示文字顏色

我正在尋找一種解決方案，它將的所有圖表應用到我的屏幕上。

檢查工具提示中的一個的元素源，顯示我：

<div class="k-tooltip k-chart-tooltip" style="font: 12px/normal Arial,Helvetica,sans-serif; border: 1px solid rgb(255, 0, 0); border-image: none; left: 497px; top: 368px; position: absolute; font-size-adjust: none; font-stretch: normal; opacity: 1; background-color: rgb(255, 0, 0);">70.25%</div>

我已經嘗試了一些東西，比如：

.k-chart .k-tooltip { 
    color: white !important; 
} 
.k-tooltip.k-chart-tooltip { 
    color: white !important; 
} 
.k-chart-tooltip { 
    color: white !important; 
}

來源

2015-04-07 Nicholas

可以在jQuery的設置顏色做，見例如HTTP ：//jsfiddle.net/nmcLh0x1/1/。如果您正在使用MVC包裝器進行kendo-chart，那麼也提供工具提示選項。 – 111

我需要一些我可以設置一次的東西，之後它適用於我的頁面上的所有圖表，因此我不想爲每個圖表設置相同的工具提示選項。我猜想一個JQuery腳本可以工作，但是我無法從工作中訪問JSFiddle.net。 – Nicholas

使用CSS，設置這個類造型

.k-tooltip,.k-chart-tooltip 
{ 
    color: white; 
}

或者

使用jQuery，您可以設置劍道圖表工具提示的顏色，同樣可以用MVC包裝 JSFiddle

 function createChart() { 
 
      $("#chart").kendoChart({ 
 
       title: { 
 
        text: "Title" 
 
       }, 
 
       legend: { 
 
        position: "bottom" 
 
       }, 
 
       chartArea: { 
 
        background: "" 
 
       }, 
 
       seriesDefaults: { 
 
        type: "line", 
 
        style: "smooth" 
 
       }, 
 
       series: [{ 
 
        name: "Series1", 
 
        color: "red", 
 
        data: [50, 100] 
 
       },{ 
 
        name: "Series2", 
 
        color: "blue", 
 
        data: [null, 100, 150] 
 
       }], 
 
       valueAxis: { 
 
        labels: { 
 
         format: "{0:c}" 
 
        }, 
 
        line: { 
 
         visible: false 
 
        }, 
 
        axisCrossingValue: -10 
 
       }, 
 
       categoryAxis: { 
 
        categories: [2002, 2003, 2004], 
 
        majorGridLines: { 
 
         visible: false 
 
        } 
 
       }, 
 
       tooltip: { 
 
        visible: true, 
 
        font: "0.8em Segoe UI", 
 
        template: "#= series.name #: #= value #", 
 
        color: "white" 
 
       } 
 
      }); 
 
     } 
 

 
     $(document).ready(createChart);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css"></script> 
 
<script src="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css"></script> 
 
<script src="http://cdn.kendostatic.com/2014.2.1008/js/kendo.all.min.js"></script> 
 

 
<div id="example"> 
 
    <div class="demo-section k-content"> 
 
     <div id="chart"></div> 
 
    </div> 
 
    
 
</div>

來源

2015-04-08 04:28:10 111

我實際上正在尋找一個jQuery腳本（或CSS），它可以更新頁面上所有圖表的工具提示顏色。我寧願不爲每個圖表手動設置顏色，因爲我有太多它們。 – Nicholas

查看此更新JSFiddle http://jsfiddle.net/nmcLh0x1/2/ – 111

function createChart() { 
 
      $("#chart").kendoChart({ 
 
       title: { 
 
        text: "Title" 
 
       }, 
 
       legend: { 
 
        position: "bottom" 
 
       }, 
 
       chartArea: { 
 
        background: "" 
 
       }, 
 
       seriesDefaults: { 
 
        type: "line", 
 
        style: "smooth" 
 
       }, 
 
       series: [{ 
 
        name: "Series1", 
 
        color: "red", 
 
        data: [50, 100] 
 
       },{ 
 
        name: "Series2", 
 
        color: "blue", 
 
        data: [null, 100, 150] 
 
       }], 
 
       valueAxis: { 
 
        labels: { 
 
         format: "{0:c}" 
 
        }, 
 
        line: { 
 
         visible: false 
 
        }, 
 
        axisCrossingValue: -10 
 
       }, 
 
       categoryAxis: { 
 
        categories: [2002, 2003, 2004], 
 
        majorGridLines: { 
 
         visible: false 
 
        } 
 
       }, 
 
       tooltip: { 
 
        visible: true, 
 
        template: "#= series.name #: #= value #", 
 
        
 
       } 
 
      }); 
 
     } 
 

 
     $(document).ready(createChart);

.k-tooltip,.k-chart-tooltip 
 
{ 
 
    color: white; 
 
    font-size: 20px !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css"></script> 
 
<script src="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css"></script> 
 
<script src="http://cdn.kendostatic.com/2014.2.1008/js/kendo.all.min.js"></script> 
 

 
<div id="example"> 
 
    <div class="demo-section k-content"> 
 
     <div id="chart"></div> 
 
    </div> 
 
    
 
</div>

來源

2015-04-08 06:35:58 111

使用CSS/JavaScript更改劍道圖表工具提示文字顏色

回答

相關問題