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

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，您可以设置剑道图表工具提示的颜色， 就像使用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> 

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