剑道带有纹理图案的条形图

问题描述

我有一个剑道条形图，如下所示.但是，我需要显示一些线条或点阵图案来代替颜色.有人可以帮我吗?

I have a kendo bar chart as below. But instead of colors i need to show as some line or dots pattern. Can someone help me on this.

我有该图表的数据源.然后，我将该数据绑定到数据源.我将如何分配模式?您能帮我吗

I have the datasource for the chart. Then I am binding that data to datasource. How will i assign the patters? Could you please help me on this

 $("#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}"
        }
    });

推荐答案

您可以使用 SVG模式 ，以应用阴影作为背景.

You can use SVG patterns to apply hatching as a background.

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

Somewhere in your HTML markup, define an svg element that includes the patterns you want to use, e.g.:

 <div style="position: absolute; width: 0; height: 0;">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
      <defs>
        <pattern id="pattern1" width="4" height="4" patternTransform="rotate(45 0 0)" patternUnits="userSpaceOnUse">
          <line x1="0" y1="0" x2="0" y2="2" style="stroke:black; stroke-width:1" />
        </pattern>

        <pattern id="pattern2" width="4" height="2" patternTransform="rotate(45 0 0)" patternUnits="userSpaceOnUse">
          <line x1="0" y1="0" x2="0" y2="2" style="stroke:black; stroke-width:1" />
        </pattern>
      </defs>
    </svg>
</div>

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

Then when creating the chart, I give each series a unique color so I can easily get the SVG paths of the bars by that fill color. In the render even of the chart, I get the bars and change the fill to the desired pattern.

        $("#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)");
            }
        });

演示

更新:

您实际上可以直接将系列颜色直接设置为图案，并避免呈现事件:

DEMO

UPDATE:

You can actually just set the series color directly to the pattern and avoid the render event:

        $("#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
                },
            },
        });

更新了 演示

Updated DEMO

这篇关于剑道带有纹理图案的条形图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！