问题
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}"
}
});
回答1:
You can use SVG patterns to apply hatching as a background.
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>
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
回答2:
Instead of modifying the bar chart, you could create a line chart. Both chart will be able to work with the same dataSource so the only thing you'll have to change set the 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 #")
)
)
来源:https://stackoverflow.com/questions/36012520/kendo-bar-chart-with-texture-pattern