Highcharts：半实线半虚线的折线图？
我试图在高图中显示一个时间序列折线图——中间的左边是历史数据，所以这条线必须是实心的。中间右侧是预测数据，因此该线需要虚线或虚线。这可能吗Highcharts：半实线半虚线的折线图？,highcharts,Highcharts,我试图在高图中显示一个时间序列折线图——中间的左边是历史数据，所以这条线必须是实心的。中间右侧是预测数据，因此该线需要虚线或虚线。这可能吗 谢谢 是的。这是可能的。很难描绘你的图表，但你可以有2个系列。一个是您的真实数据，另一个是预测/未来数据。要设置线条样式，请使用。我认为在一个系列中不能有两种不同的线条样式，但可以将系列拆分为两个，然后为第二个系列指定x坐标，以从第一个系列停止的位置开始。然后您可以设置该行的dashStyle series: [{ name: 'To
谢谢 是的。这是可能的。很难描绘你的图表，但你可以有2个系列。一个是您的真实数据，另一个是预测/未来数据。要设置线条样式，请使用。我认为在一个系列中不能有两种不同的线条样式，但可以将系列拆分为两个，然后为第二个系列指定x坐标，以从第一个系列停止的位置开始。然后您可以设置该行的
dashStyleseries: [{
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'
}]
$（函数（）{
$（“#容器”）。高图({
系列：[{
数据：[-10，-5,0,5,10,15,10,10,5,0，-5]，
分区：[{
值：0，
颜色：“#f7a35c”，
风格：'点'，
}, {
数值：10，
颜色：“#7cb5ec”
}, {
颜色：“#90ed7d”
}, ]
}]
});
});
是的，在一个折线图中可以使用实线和虚线。我已经使用java程序实现了它，为系列创建了数据
创建两个系列
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
}
}
}
考虑这些问题
12345678910111313141415
从1到5是它的虚线。
从5点到10点是虚线。
从10-15再画一次虚线。
考虑一些x轴值，如你所愿。< /P>
这是创建两个系列数据点的java逻辑：-
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.
将这两个列表作为json发送到Jsp或HTMl页面，并将其分配给这两个系列的数据
这是我创建的一个示例。请将此代码保存在一个HTMl文件中，名为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>
var colors=Highcharts.getOptions（）.colors；
var pathname=window.location.pathname；
//console.log（路径名）；
var-containerName=1；
/*通过传递索引名和类来创建div元素*/
函数create\u div\u dynamic（i、id、className）{
dv=document.createElement（'div'）；//动态创建div标记
dv.setAttribute（'id'，id+i）；//给它id
dv.className=className；//设置样式className
//设置div标记的内部样式
dv.style.margin=“0px自动”；
如果（id=‘容器’）{
//hr=document.createElement（'hr'）；
//br=document.createElement（'br'）；//在每个图表容器和水平规则之后断开。
//document.body.appendChild（br）；
//文件.正文.附件（hr）；
}
文件.正文.附件（dv）；
}
/*通过传递索引名和类来创建跨度元素*/
函数create\u span\u dynamic（i、id、className）{
dv=document.createElement（'span'）；//动态创建div标记
dv.setAttribute（'id'，id+i）；//将id附加到名称
dv.className=className；//设置样式className
//设置跨度标记的内部样式
dv.style.margin=“0px自动”；
文件.正文.附件（dv）；
}
/*获取URL参数*/
函数getUrlParameter（sParam）
{
var sPageURL=window.location.search.substring（1）；
var sURLVariables=sPageURL.split（'&'）；
对于（变量i=0；ivar 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'
}]
});