Javascript 高图:2轴所有相同的值看起来都很奇怪
我目前正在使用当前版本的HighCharts,但有一个问题,我有一个具有2轴(1列和1条样条线)的图形,但每个数据点的值完全相同: 我为这个问题创建了一个JSFIDLE: 源代码也在这里:Javascript 高图:2轴所有相同的值看起来都很奇怪,javascript,jquery,highcharts,Javascript,Jquery,Highcharts,我目前正在使用当前版本的HighCharts,但有一个问题,我有一个具有2轴(1列和1条样条线)的图形,但每个数据点的值完全相同: 我为这个问题创建了一个JSFIDLE: 源代码也在这里: /*** Experimental Highcharts plugin to implement chart.alignThreshold option. This primary axis will be computed first, then all following axes will be ali
/*** Experimental Highcharts plugin to implement chart.alignThreshold option. This primary axis will be computed first, then all following axes will be aligned to the threshold.Author: Torstein Hønsi Last revision: 2016-11-02 */
(function (H) {
var Axis = H.Axis,
inArray = H.inArray,
wrap = H.wrap;
wrap(Axis.prototype, 'adjustTickAmount', function (proceed) {
var chart = this.chart,
primaryAxis = chart[this.coll][0],
primaryThreshold,
primaryIndex,
index,
newTickPos,
threshold;
// Find the index and return boolean result
function isAligned(axis) {
index = inArray(threshold, axis.tickPositions); // used in while-loop
return axis.tickPositions.length === axis.tickAmount && index === primaryIndex;
}
if (chart.options.chart.alignThresholds && this !== primaryAxis) {
primaryThreshold = (primaryAxis.series[0] && primaryAxis.series[0].options.threshold) || 0;
threshold = (this.series[0] && this.series[0].options.threshold) || 0;
primaryIndex = primaryAxis.tickPositions && inArray(primaryThreshold, primaryAxis.tickPositions);
if (this.tickPositions && this.tickPositions.length &&
primaryIndex > 0 &&
primaryIndex < primaryAxis.tickPositions.length - 1 &&
this.tickAmount) {
// Add tick positions to the top or bottom in order to align the threshold
// to the primary axis threshold
while (!isAligned(this)) {
if (index < primaryIndex) {
newTickPos = this.tickPositions[0] - this.tickInterval;
this.tickPositions.unshift(newTickPos);
this.min = newTickPos;
} else {
newTickPos = this.tickPositions[this.tickPositions.length - 1] + this.tickInterval;
this.tickPositions.push(newTickPos);
this.max = newTickPos;
}
proceed.call(this);
}
}
} else {
proceed.call(this);
}
});
}(Highcharts));
Highcharts.chart('container', {
chart: {
alignThresholds: true,
type: 'area'
},
title: {
text: 'The <em>alignThreshold</em> option is true'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: [{
title: {
text: 'Primary Axis'
},
gridLineWidth: 0
}, {
title: {
text: 'Secondary Axis'
},
opposite: true
}],
series: [{
type : 'column',
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
yAxis: 0,
pointWidth: 20,
}, {
type : 'spline',
data: [5000, 5000, 5000, 5000, 5000, 5000, 5000, 5000, 5000, 5000, 5000, 5000],
yAxis: 1
}]
});
/***用于实现chart.alignThreshold选项的实验Highcharts插件。首先计算主轴,然后将以下所有轴与阈值对齐。作者:Torstein Hønsi最新版本:2016-11-02*/
(职能(H){
var轴=H轴,
inArray=H.inArray,
wrap=H.wrap;
包裹(Axis.prototype“adjustTickAmount”功能(继续){
var chart=此.chart,
primaryAxis=图表[this.coll][0],
初级门槛,
primaryIndex,
指数
newTickPos,
门槛;
//查找索引并返回布尔结果
函数未对齐(轴){
index=inArray(阈值,axis.tickPositions);//用于while循环
返回axis.tickPositions.length==axis.tickAmount&&index==primaryIndex;
}
if(chart.options.chart.alignThresholds&&this!==primaryAxis){
primaryThreshold=(primaryAxis.series[0]&&primaryAxis.series[0]。options.threshold)| 0;
threshold=(this.series[0]&&this.series[0].options.threshold)|0;
primaryIndex=primaryAxis.tickPositions&&inArray(primaryThreshold,primaryAxis.tickPositions);
if(this.tickPositions&&this.tickPositions.length&&
primaryIndex>0&&
primaryIndex
如果我在第二个轴上使用一个面积(或柱,…)图,一切都正常。该问题仅在样条曲线图或折线图中出现
完美的解决方案在某种程度上应该如图所示(第一个数据点当然应该与所有其他数据点处于同一级别,但仍然位于1轴的0点之上)
有没有办法为样条曲线或折线图定义偏移量,以使线不从次轴上的0开始?我不确定是否理解您的目标-但如何定义最小/最大轴?谢谢这很有效。有时它可以如此简单:)