Question

我图表的所有工具提示的文字颜色都是黑色的，这对我的图表颜色不起作用。我一直在尝试使用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;
}

Answer 1

使用CSS，将此类设置为样式

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

或者

使用jQuery，您可以设置kendo图表工具提示颜色，与mvc包装器相同 JSFiddle

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: