I'm trying to show a time series line graph in highcharts - to the left of center is historical data, so the line needs to be solid. To the right of center is predicted data, so the line needs to be dotted or dashed. Is this possible?
Thanks!
可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):
问题:
回答1:
Yes, you can, using zones. Zones let you apply different styles within the same series of data, and can be applied against both x- and y-axes.
Examples
- Different colors by y-axis value
$(function() {
$('#container').highcharts({
series: [{
data: [-10, -5, 0, 5, 10, 15, 10, 10, 5, 0, -5],
zones: [{
value: 0,
color: '#f7a35c',
style: 'dotted',
}, {
value: 10,
color: '#7cb5ec'
}, {
color: '#90ed7d'
}, ]
}]
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>- Different dash styles by x-axis position
$(function() {
$('#container').highcharts({
title: {
text: 'Zone with dash style'
},
subtitle: {
text: 'Dotted line typically signifies prognosis'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
zoneAxis: 'x',
zones: [{
value: 8
}, {
dashStyle: 'dot'
}]
}]
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px; max-width: 800px; margin: 0 auto"></div>回答2:
I don't think you can have two different kind of line style in one series, but you can split the series into two, then specify the x coordinates for the second series to start where the first left off. Then you can set the dashStyle of that line.
series: [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5]
}, {
name: 'New York',
data: [{x: 5, y: 21.5}, {x: 6, y: 22.0}, {x: 7, y: 24.8}, {x: 8, y: 24.1}, {x: 9, y: 20.1}, {x:10, y: 14.1}, {x:11, y: 13}],
dashStyle: 'dash'
}]
Here's a JSFiddle illustrating it: http://jsfiddle.net/mkremer90/zMZEV/1/
回答3:
Yes. This is possible. Hard to picture your chart but what you could have is 2 series. One is your real data and the other is the predicted/future data. To set the line style use dashStyle.
回答4:
Yes solid and dashed lines in one line graph is possible .I have implemented it using a java program to create my data for series .
Create two series
series : [
{
name : 'Series 1',
id : 'series1',
data : mydashData,
allowPointSelect : true,
marker: {
enabled: false
}
},
{
name : 'Series 2',
data : myDotData,
dashStyle : 'dot',
id : 'series2',
color : '#A81F40',
allowPointSelect : true,
marker: {
enabled: false
}
}
}
Consider these points 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
From 1 -5 its dashed line . From 5-10 its dotted Line . From 10-15 its dashed line again . Consider some sample X axis Values as you wish.
This is the java logic to create two series data points : -
List dashList;
List dotList;
Initial = FirstPoint ;
LOOP
if Initial == Dash and LastParsedPoint = Dash
add to DashList corresponding to that X axis value
if Initial ==Dot and LastParsePoint = Dot
add to DotList corresponding to that X axis value
if Initial == Dot and LastParsePoint =Dash
add to DashList Y and X values
add to DashList y =NULL and same X value
add to DotList y and X value.
if Initial =Dash and LastParsePoint =Dot
add to DotList Y and X values
add to DotList Y =NULL and same X value
add to DashList Y and X value.
LastParsePoint =Initial
END LOOP.
Send this two list as json to Jsp or HTMl page and assign it to data of both the series .
Here is a sample i created .Please save this code in an HTMl file As Chart.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript">
var colors = Highcharts.getOptions().colors;
var pathname = window.location.pathname;
//console.log(pathname);
var containerName = 1;
/*Creates a div element by passing index name and class*/
function create_div_dynamic(i, id, className) {
dv = document.createElement('div'); // create dynamically div tag
dv.setAttribute('id', id + i); //give id to it
dv.className = className; // set the style classname
//set the inner styling of the div tag
dv.style.margin = "0px auto";
if (id == 'container') {
//hr = document.createElement('hr');
//br = document.createElement('br');//Break after Each Chart Container and Horizontal Rule.
//document.body.appendChild(br);
//document.body.appendChild(hr);
}
document.body.appendChild(dv);
}
/*Creates a span element by passing index name and class*/
function create_span_dynamic(i, id, className) {
dv = document.createElement('span'); // create dynamically div tag
dv.setAttribute('id', id + i); //append id to to name
dv.className = className; // set the style classname
//set the inner styling of the span tag
dv.style.margin = "0px auto";
document.body.appendChild(dv);
}
/*Get URL Parameters*/
function getUrlParameter(sParam)
{
var sPageURL = window.location.search.substring(1);
var sURLVariables = sPageURL.split('&');
for (var i = 0; i < sURLVariables.length; i++)
{
var sParameterName = sURLVariables[i].split('=');
if (sParameterName[0] == sParam)
{
return sParameterName[1];
}
}
}
$(document).ready(function() {
var json = getUrlParameter('json');
$.ajax({
type: 'GET',
url: json,
dataType: 'jsonp',
jsonpCallback: 'jsonCallback',
async: false,
contentType: "application/json",
success: function (datas){
//Each data table column/block index.
var blockNumber = 0;
//Each Row inside block index
var rowNumber = 0;
//Used to store previous charts row index for blank divs generation
var prevRowNum=0;
//Number of blank divs created .
var oldC=0;
//J : Chart Index
for (j = 0; j < 2; j++) {
for ( var key in datas.root[j]) {
var solid = [];
var dot = [];
for (i = 0; i < datas.root[j][key][0].solid.length; i++) {
solid.push([parseInt(datas.root[j][key][0].solid[i].date),parseFloat(datas.root[j][key][0].solid[i].value)|| null ]);
}
for (i = 0; i < datas.root[j][key][0].dot.length; i++) {
dot.push([parseInt(datas.root[j][key][0].dot[i].date),parseFloat(datas.root[j][key][0].dot[i].value)|| null ]);
}
var chartBlock = '';
var k = j;
//Container Name
var renderCont = 'container'+ ++j;
create_div_dynamic(j,'container','image-capture-container');
//Creating Charts
this['chart_' + j] = new Highcharts.Chart(
{
chart : {
renderTo : renderCont,
type : 'line',
zoomType : 'xy',
borderWidth : 0,
borderColor : '#ffffff',
borderRadius : 0,
width : 600,
height : 400,
plotShadow : false,
alignTicks :true,
plotBackgroundColor:'#C0C4C9',
//margin: [15, 10, 40,60],
style : {
//position : 'relative',
opacity : 100,
textAlign : 'center'
}
},
xAxis : {
useHTML : true,
type : 'datetime',
lineColor: '#ffffff',
tickInterval:30 * 24 * 3600 * 1000,
tickColor: '#000000',
tickWidth: 1,
tickLength: 5
},
yAxis : {
title : {
useHTML :'true',
align : 'high',
offset:0,
rotation: 0,
y: 1,
x:-4,
},
lineWidth : 1,
gridLineWidth :2,
minorGridLineWidth : 1,
gridLineColor :'#FFFFFF',
lineColor:'DarkGray',
opposite : false,
maxPadding: 0.2,
labels : {
align : 'right',
x : -5
}
},
series : [
{
name : 'Solid Line',
id : 'series1',
data : solid,
allowPointSelect : true,
color : '#888888',
marker: {
enabled: false
}
},
{
name : 'Dashed',
data : dot,
dashStyle : 'dot',
id : 'series2',
color : '#666666',
allowPointSelect : true,
marker: {
enabled: false
}
}
]
});
create_div_dynamic(j,'main','main');
var main = 'main'+ j;
var chartDiv = $('#'+renderCont).children(":first").attr('id');
//console.log(chartDiv);
create_div_dynamic(j,'title_div','title_div');
$('#' + main).append($('#'+ chartDiv));
$('#' + renderCont).append($('#'+ main));
}
} //End of Each Chart Loop
}
});
});
</script>
</head>
<body id="mainBody">
</body>
</html>
I am posting the sample json in Jsfiddle here: https://jsfiddle.net/t95r60fc/
Save this json as json1.json and keep it in same directory as Chart.html and open the html in browser as given below :
file:///C:/temp/Chart.html?json=C:/temp/json1.json?callback=jsonCallback
Final output will be like this :
回答5:
var envelopBorder =[[-20, 63], [-20, 85], null, null,null,null,[19, 130], [35,150], [60,150],[65,148], [80,140],[80,100],[65,82],[55,70],[40,67],[20,63],[15,63],[-20,63]] ;
var dasshedBorder =[[-20, 85],[-20, 100],[1, 130],[19, 130]] ;
Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: 'Operating Envelop'
},
xAxis: {
title: {
enabled: true,
text: 'Evaporating Temperature (°F)'
},
gridLineWidth: 0,
lineWidth:1,
startOnTick: true,
endOnTick: true,
showLastLabel: true
},
yAxis: {
title: {
text: 'Temperature (°C)'
}
},
plotOptions: {
line: {
dataLabels: {
enabled: true
},
enableMouseTracking: false
}
},
series: [{
name: 'Normal',
data: envelopBorder
}, {
name: 'Dash',
data: dasshedBorder,
dashStyle: 'dash'
}]
});
Result :-
jsfiddle.net/7c9929mg
标签：
highcharts
{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://i.stack.imgur.com/hsEhW.jpg', '推荐 女痞 的文章《Highcharts: Line graph with half solid line and ha》','https://www.manongdao.com/article-1856864.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}