的 DEMO

Question

我有一个如下的剑道条形图。但不是颜色，我需要显示为一些线或点图案。有人可以帮我这个。

我有图表的数据源。然后我将该数据绑定到数据源。我将如何分配图案？能帮到我吗

 $("#NumActivitiesChart").kendoChart({
        title: {
            text: "Number of Activities Report",
            font: "bold 20px Arial,Helvetica,sans-serif",
            color: "brown"
        },
        //plotArea: {
        //    background: "#EAEFFA"
        //},
        dataSource: dsNumActivitiesData,
        seriesColors: colours,
        series: [{
            type: "column",
            categoryField: "ChartByName",
            field:"NumTestInstances",
            gap:5
        }],

        valueAxis: {
            title: {
                text: "Number of Activities",
                font: "bold 15px Arial,Helvetica,sans-serif",
                color: "brown"
            }
        },

        categoryAxis:{
            title: {
                text: "@Model.Filters.NumActivitiesChartBy",
                font: "bold 18px Arial,Helvetica,sans-serif",
                color: "brown"
            }
        },
        tooltip: {
            visible: true,
            template: "${series.name} : ${value}"
        }
    });

Answer 1

您可以使用 SVG patterns 将影线作为背景应用。

在HTML标记的某处，定义一个包含您要使用的模式的svg元素，例如：

        $("#chart").kendoChart({
            theme: "flat",
            seriesDefaults: {
                type: "column",
            },
            series: [{
                name: "S1",
                color: "rgba(150,150,150,0.999)",
                data: [10, 30, 20, 45, 60]
            },{
                name: "S2",
                color: "rgba(120,120,120,0.999)",
                data: [20, 10, 14, 56, 89]
            } ],
            valueAxis: {
                majorGridLines: {
                    visible: false
                },
            },
            categoryAxis: {
                categories: ["Jan", "Feb", "Mar", "Apr", "May"],
                majorGridLines: {
                    visible: false
                },
            },
           render: function(e){                
              $('[fill="rgba(150,150,150,0.999)"]').attr("fill", "url(#pattern1)");
              $('[fill="rgba(120,120,120,0.999)"]').attr("fill", "url(#pattern2)");
            }
        });

然后在创建图表时，我给每个系列一个独特的颜色，这样我就可以通过该填充颜色轻松获得条形的SVG路径。在图表的渲染中，我得到了条形图并将填充更改为所需的图案。

        $("#chart").kendoChart({
            theme: "flat",
            seriesDefaults: {
                type: "column",
            },
            series: [{
                name: "S1",
                color: "url(#pattern1)",
                data: [10, 30, 20, 45, 60]
            },{
                name: "S2",
                color: "url(#pattern2)",
                data: [20, 10, 14, 56, 89]
            } ],
            valueAxis: {
                majorGridLines: {
                    visible: false
                },
            },
            categoryAxis: {
                categories: ["Jan", "Feb", "Mar", "Apr", "May"],
                majorGridLines: {
                    visible: false
                },
            },
        });

的 DEMO

<强>更新

您实际上可以直接将系列颜色设置为模式并避免渲染事件：

EOFError: end of file reached

更新了 DEMO

Answer 2

您可以创建折线图，而不是修改条形图。两个图表都可以使用相同的dataSource，因此您唯一需要更改的内容设置为SeriesDefaults：

@(Html.Kendo().Chart()
    .Name("chart")
    .Title("Site Visitors Stats \n /thousands/")
    .Legend(legend => legend
        .Visible(false)
    )
    .ChartArea(chartArea => chartArea
        .Background("transparent")
    )
    .SeriesDefaults(seriesDefaults => 
        seriesDefaults.Line().Style(ChartLineStyle.Smooth)
    )
    .Series(series => {
        series.Bar(new double[] { 56000, 63000, 74000, 91000, 117000, 138000 }).Name("Total Visits");
        series.Bar(new double[] { 52000, 34000, 23000, 48000, 67000, 83000 }).Name("Unique visitors");
    })
    .CategoryAxis(axis => axis
        .Categories("Jan", "Feb", "Mar", "Apr", "May", "Jun")
        .MajorGridLines(lines => lines.Visible(false))
    )
    .ValueAxis(axis => axis
        .Numeric()
        .Max(140000)
        .Line(line => line.Visible(false))
        .MajorGridLines(lines => lines.Visible(true))
    )
    .Tooltip(tooltip => tooltip
        .Visible(true)
        .Template("#= series.name #: #= value #")
    )
)

剑道与纹理图案的条形图

2 个答案:

的 DEMO

<强>更新