使用 CSS/JavaScript 更改 Kendo 图表工具提示文本颜色
Change Kendo Chart tooltip text color using CSS/JavaScript
我图表的所有工具提示文本颜色都是黑色的,这与我的图表颜色不匹配。我一直在尝试使用 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;
}
使用 CSS,设置此 class 样式
.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>
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 将颜色更改为白色,但不知何故它没有改变。
我正在寻找一种解决方案,可以将颜色应用到我屏幕上的所有图表。
检查其中一个工具提示的元素源,向我显示:
<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;
}
使用 CSS,设置此 class 样式
.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>
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>