Javascript Highcharts区域样条曲线值在y轴上的位置不正确
我有一个面积样条曲线图表,它似乎不正确地沿y轴放置数据点。我正在使用angular highcharts指令,并通过我的服务提供图表选项。数据本身是正确的,标签也是正确的,只是点沿y轴放置得太高了。请参见下图和代码: 服务功能:Javascript Highcharts区域样条曲线值在y轴上的位置不正确,javascript,angularjs,highcharts,Javascript,Angularjs,Highcharts,我有一个面积样条曲线图表,它似乎不正确地沿y轴放置数据点。我正在使用angular highcharts指令,并通过我的服务提供图表选项。数据本身是正确的,标签也是正确的,只是点沿y轴放置得太高了。请参见下图和代码: 服务功能: function getReportingChart(quarterlyData, chartType, reportingType) { // extract top 4 drugs var top4 = _.sortBy(q
function getReportingChart(quarterlyData, chartType, reportingType) {
// extract top 4 drugs
var top4 = _.sortBy(quarterlyData, 'x2q2').reverse().slice(0, 4);
var dataSeries = [];
var firstDrug = quarterlyData[0];
var seriesNumber = 0;
var quarters = ['Q1 2012', 'Q2 2012', 'Q3 2012', 'Q4 2012', 'Q1 2013', 'Q2 2013', 'Q3 2013', 'Q4 2013', 'Q1 2014', 'Q2 2014'];
_.each(top4, function (drug) {
var name = drug.A;
var dataArray = [];
dataArray.push(drug.x0q1);
dataArray.push(drug.x0q2);
dataArray.push(drug.x0q3);
dataArray.push(drug.x0q4);
dataArray.push(drug.x1q1);
dataArray.push(drug.x1q2);
dataArray.push(drug.x1q3);
dataArray.push(drug.x1q4);
dataArray.push(drug.x2q1);
dataArray.push(drug.x2q2);
var newDataSet = new buildSeries(name, dataArray, seriesNumber);
dataSeries.push(newDataSet);
console.log(newDataSet);
seriesNumber += 1;
});
return {
options: {
chart: {
type: chartType
},
plotOptions: {
series: {
stacking: 'normal'
}
},
},
series: dataSeries,
title: {
text: 'Top 4 Drugs By ' + annotateChartByType(reportingType).titleSuffix
},
credits: {
enabled: false
},
loading: false,
xAxis: {
categories: quarters,
tickmarkPlacement: 'between',
labels: {},
min: 0.5,
max: quarters.length - 1.5,
startOnTick: false,
endOnTick: false
},
yAxis: {
title: {
text: annotateChartByType(reportingType).yAxis.title
},
labels: {
format: annotateChartByType(reportingType).yAxis.unitformat
}
},
size: {}
};
}
function annotateChartByType(params){
var defaultOption = {titleSuffix:" Primary Reports", yAxis: {title: "Number of Reports", unitformat: '{value}'}};
switch (params) {
case 'ps-cases':
return defaultOption;
case 'patients':
return {titleSuffix:" Patient Incidence Rate",yAxis: {title: "Incidence Rate", unitformat: '{value:,.2f} %'}};
case 'serious-outcomes':
return {titleSuffix:" Outcome Rate", yAxis: {title: "Incidence Rate", unitformat: '{value:%.2f} %'}};
case 'serious-adverse-events':
return {titleSuffix:" Serious AE Rate", yAxis: {title: "Incidence Rate", unitformat: '{value:%.2f} %'}};
default:
return defaultOption;
}
}
下面是annotateChartByType函数:
function getReportingChart(quarterlyData, chartType, reportingType) {
// extract top 4 drugs
var top4 = _.sortBy(quarterlyData, 'x2q2').reverse().slice(0, 4);
var dataSeries = [];
var firstDrug = quarterlyData[0];
var seriesNumber = 0;
var quarters = ['Q1 2012', 'Q2 2012', 'Q3 2012', 'Q4 2012', 'Q1 2013', 'Q2 2013', 'Q3 2013', 'Q4 2013', 'Q1 2014', 'Q2 2014'];
_.each(top4, function (drug) {
var name = drug.A;
var dataArray = [];
dataArray.push(drug.x0q1);
dataArray.push(drug.x0q2);
dataArray.push(drug.x0q3);
dataArray.push(drug.x0q4);
dataArray.push(drug.x1q1);
dataArray.push(drug.x1q2);
dataArray.push(drug.x1q3);
dataArray.push(drug.x1q4);
dataArray.push(drug.x2q1);
dataArray.push(drug.x2q2);
var newDataSet = new buildSeries(name, dataArray, seriesNumber);
dataSeries.push(newDataSet);
console.log(newDataSet);
seriesNumber += 1;
});
return {
options: {
chart: {
type: chartType
},
plotOptions: {
series: {
stacking: 'normal'
}
},
},
series: dataSeries,
title: {
text: 'Top 4 Drugs By ' + annotateChartByType(reportingType).titleSuffix
},
credits: {
enabled: false
},
loading: false,
xAxis: {
categories: quarters,
tickmarkPlacement: 'between',
labels: {},
min: 0.5,
max: quarters.length - 1.5,
startOnTick: false,
endOnTick: false
},
yAxis: {
title: {
text: annotateChartByType(reportingType).yAxis.title
},
labels: {
format: annotateChartByType(reportingType).yAxis.unitformat
}
},
size: {}
};
}
function annotateChartByType(params){
var defaultOption = {titleSuffix:" Primary Reports", yAxis: {title: "Number of Reports", unitformat: '{value}'}};
switch (params) {
case 'ps-cases':
return defaultOption;
case 'patients':
return {titleSuffix:" Patient Incidence Rate",yAxis: {title: "Incidence Rate", unitformat: '{value:,.2f} %'}};
case 'serious-outcomes':
return {titleSuffix:" Outcome Rate", yAxis: {title: "Incidence Rate", unitformat: '{value:%.2f} %'}};
case 'serious-adverse-events':
return {titleSuffix:" Serious AE Rate", yAxis: {title: "Incidence Rate", unitformat: '{value:%.2f} %'}};
default:
return defaultOption;
}
}
这是因为你有:
plotOptions: {
series: {
stacking: 'normal'
}
}
这意味着您看到的值对于蓝色系列确实是正确的,但它叠加在其他三个系列上,这使得它在y轴上更高。如果这是无意的,请删除此代码
如果是有意的,您可以使用格式设置程序中的总计值
或点格式
获取总计,而不是序列值。请参见此pointFormat
示例:
tooltip: {
pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.y}</b> ({point.total})<br/>'
}
工具提示:{
pointFormat:'\u25CF{series.name}:{point.y}({point.total})
}
看。这是默认值,添加了括号以显示总数。出于好奇,您是否尝试过在错误渲染的数据点上方放置另一个数据点?是否仅当它是最后一个数据点时才显示错误?我最近一直在一起使用AngularJS和Highcharts,有一些类似的怪癖。我不使用AngularJS,所以这可能是一个愚蠢的问题。但是,annotateChartByType(reportingType).yAxis.unitformat看起来像什么?@SmegheadSev所有的点似乎都偏离了相同的数量级,而不仅仅是最后一个点。@BarbaraLaird,这是一个自定义函数,用于生成数据标签的值(本例中为25 366)。