使用 KendoUI 折线图，如何使数据标记（点）成为纯色？答案

【问题标题】：Using KendoUI Line Chart, How to make the data markers (Dots) a solid color?使用 KendoUI 折线图，如何使数据标记（点）成为纯色？
【发布时间】：2012-04-17 21:29:04
【问题描述】：

我正在使用 Kendo UI 替换现有图表。我需要尽量减少图表之间的变化。有谁知道如何使折线图上的点变成实心的？能不能把线变细？

这是我的图表图像：

如果你想玩的话，这是我的 jsFiddle 项目：http://jsfiddle.net/rodneyhickman/uMTnh/2/

我的 html 看起来像：

<div id='chart'  ></div>

我的 jQuery 脚本看起来像：

    jQuery('#chart').kendoChart({
    title: {
        text: "Overall Score out of 100",
        align: "left",
        font: "18px Arial, Verdana, sans-serif",
        color: "#444"
    },
    seriesDefaults: {
        type: "line",
        missingValues: "interpolate",

    },
    legend: {
        position: "bottom"
    },
    tooltip: {
        visible: true,
        format: "{0}%"
    },
    valueAxis: {
        min: 70,
        max: 85,
        plotBands: [{
            from: 70,
            to: 75,
            color: "#EDF5FF"},
        {
            from: 80,
            to: 85,
            color: "#EDF5FF"}]
    },
    series: [{
        name: "Some Product",
        color: "004990",
        tooltip: {
            visible: true,
            template: "<b>Some Product</b><br/>Current Score: #= value #<br/>#= category # "
        },
        data: [81.82, 81.82, 81.82, null, null, null, null, null, null, null, null, 70.42, 72.37]},
    {
        name: "Some Market Segmemt",
        color: "da7633",
        tooltip: {
            visible: true,
            template: "<b>Some Market Segmemt</b><br/>Current Score: #= value #<br/>#= category # "
        },
        data: [73.81, 73.52, 73.59, 73.49, 73.41, 73.51, 73.72, 73.27, 74.23, 73.99, 73.97, 73.83, 73.79]}],
    categoryAxis: {
        labels: {
            rotation: -45,
            step: 1,
            skip: 0
        },
        categories: ["Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec", "Jan - 2012", "Feb", "Mar"]
    }
});

任何帮助将不胜感激。

【问题讨论】：

标签： javascript jquery asp.net telerik kendo-ui

【解决方案1】：

在系列对象中使用 markers: { background: "#004990" }, // 使用背景颜色。

要设置栏的宽度，还可以使用 width: 1 属性。

这是您可以使用的 jsfiddle 解决方案：http://jsfiddle.net/rodneyhickman/uMTnh/3/

这是生成的图像：

新的 jQuery 脚本如下所示：

jQuery('#chart').kendoChart({
    title: {
        text: "Overall Score out of 100",
        align: "left",
        font: "18px Arial, Verdana, sans-serif",
        color: "#444"
    },
    seriesDefaults: {
        type: "line",
        missingValues: "interpolate"

    },
    legend: {
        position: "bottom"
    },
    tooltip: {
        visible: true,
        format: "{0}%"
    },
    valueAxis: {
        min: 70,
        max: 85,
        plotBands: [{
            from: 70,
            to: 75,
            color: "#EDF5FF"},
        {
            from: 80,
            to: 85,
            color: "#EDF5FF"}]
    },
    series: [{
        name: "Some Product",
        color: "004990",
        width: 1,
        markers: { background: "#004990"  },
        size: 2,
        tooltip: {
            visible: true,
            template: "<b>Some Product</b><br/>Current Score: #= value #<br/>#= category # "
        },
        data: [81.82, 81.82, 81.82, null, null, null, null, null, null, null, null, 70.42, 72.37]},
    {
        name: "Some Market Segmemt",
        color: "da7633",
        width: 1,
        markers: { background: "#da7633"  },
        tooltip: {
            visible: true,
            template: "<b>Some Market Segmemt</b><br/>Current Score: #= value #<br/>#= category # "
        },
        data: [73.81, 73.52, 73.59, 73.49, 73.41, 73.51, 73.72, 73.27, 74.23, 73.99, 73.97, 73.83, 73.79]}],
    categoryAxis: {
        labels: {
            rotation: -45,
            step: 1,
            skip: 0
        },
        categories: ["Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec", "Jan - 2012", "Feb", "Mar"]
    }
});

【讨论】：