Question

const cars = ['Volvo', 'Saab', 'Mervedes', 'Audi'];

let domSelect = document.createElement('select');
domSelect.multiple = true;
document.getElementsByTagName('body')[0].appendChild(domSelect);


for (const i in cars) {
  let optionSelect = document.createElement('option');

  let optText = document.createTextNode(cars[i]);
  optionSelect.appendChild(optText);

  document.getElementsByTagName('select')[0].appendChild(optionSelect);
}

如何更改Kendo UI中的迷你背景色？

Answer 1

我相信你可以使用PlotArea。请参阅文档。您可以设置背景，边框，边距，不透明度和填充

https://www.telerik.com/kendo-angular-ui/components/charts/api/PlotArea/

Answer 2

您应该使用属性chartArea.background。参考你的例子：

$("#spark-collector").kendoSparkline({
    type: "line",
    charArea: {
        background: "cyan"
    },
    data: [
        71, 70, 69, 68, 65, 60, 55, 55, 50, 52,
        73, 72, 72, 71, 68, 63, 57, 58, 53, 55,
        63, 59, 61, 64, 58, 53, 48, 48, 45, 45,
        63, 64, 63, 67, 58, 56, 53, 59, 51, 54
    ],
    valueAxis: {
        min: 0,
        max: 100
    },
    seriesColors: ["blue"],
    tooltip: {
        visible: true
    }
});

查看文档here

关注代码段...

＆＃13;

$("#spark-collector").kendoSparkline({
  type: "line",
  chartArea: {
    background: "cyan"
  },
  data: [
    71, 70, 69, 68, 65, 60, 55, 55, 50, 52,
    73, 72, 72, 71, 68, 63, 57, 58, 53, 55,
    63, 59, 61, 64, 58, 53, 48, 48, 45, 45,
    63, 64, 63, 67, 58, 56, 53, 59, 51, 54
  ],
  valueAxis: {
    min: 0,
    max: 100
  },
  seriesColors: ["blue"],
  tooltip: {
    visible: true
  }
});

＆＃13;

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.bootstrap-v4.min.css" />

<script src="https://kendo.cdn.telerik.com/2018.1.221/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/kendo.all.min.js"></script>

<div id="spark-collector"></div>

＆＃13;

如何在Kendo UI中更改迷你背景色

2 个答案: