使用 CSS/JavaScript 更改 Kendo Chart 工具提示文本颜色

Posted

技术标签:

【中文标题】使用 CSS/JavaScript 更改 Kendo Chart 工具提示文本颜色【英文标题】:Change Kendo Chart tooltip text color using CSS/JavaScript 【发布时间】:2015-06-11 14:16:15 【问题描述】:

我的图表工具提示的所有文本颜色都是黑色的,这与我的图表颜色不匹配。我一直在尝试使用 CSS 将颜色更改为白色,但不知何故它并没有改变。

我正在寻找一种将颜色应用于我屏幕上的所有图表的解决方案。

检查其中一个工具提示的元素来源,向我展示了这一点:

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

【问题讨论】:

您可以在 jQuery 中设置颜色,参见示例jsfiddle.net/nmcLh0x1/1。如果您将 MVC 包装器用于 kendo-chart,则还可以使用工具提示选项。 我需要一些我可以设置一次的东西,之后它会应用于我页面上的所有图表,所以我不想为每个图表设置相同的工具提示选项。我想 JQuery 脚本可以工作,但我无法从这里访问 JSFiddle.net。 【参考方案1】:

使用 CSS,为样式设置此类

.k-tooltip,.k-chart-tooltip

     color: white;

或者

使用 jQuery,您可以设置 kendo 图表工具提示颜色,您可以使用 mvc wrapper 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>

【讨论】:

我实际上正在寻找一个 jQuery 脚本(或 CSS)来更新页面上所有图表的工具提示颜色。我不想为每个图表手动设置颜色,因为我有太多的颜色。【参考方案2】:

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>

【讨论】:

以上是关于使用 CSS/JavaScript 更改 Kendo Chart 工具提示文本颜色的主要内容,如果未能解决你的问题,请参考以下文章

单击时更改字体真棒图标的颜色:CSS / JavaScript

HTML / CSS / Javascript - 将鼠标悬停在不同的单元格上时更改一个表格单元格的值

无需重启服务器即可更改静态内容(html、css、JS) Wildfly 8

我需要包含哪些特定文件,如css,javascript

前端基础面试题(Html,css,Javascript)_2

本地主机不记录更改?