2017-09-18 50 views
1

我知道标题听起来令人困惑,但找到这个问题的句子并不容易,所以我会试着进一步解释。Highcharts将y轴设置为“100%”作为自定义值的总和

我正在尝试显示给定平台每天创建多少个测试用例的历史记录。 y值表示当前测试用例的数量,而“预期”是每个serie需要达到目标的测试用例的数量。

我可以以某种方式让y轴显示预期值吗?所以,如果我只想看IOS系列,那么它应该知道y和预期相同的时刻应该填充100%而不是12%的情节。当创建2个测试用例时,如果期望值是6,那么它应该填充33%而不是2%。

http://jsfiddle.net/dWDE6/1201/

var chart = new Highcharts.Chart({ 
 
    chart: { 
 
    renderTo: 'container' 
 
    }, 
 

 
    tooltip: { 
 
    shared: true, 
 
    pointFormat: '{series.name}: <b>{point.y}/{point.expected}</b><br/>', 
 
    }, 
 
    xAxis: { 
 
    type: 'datetime' 
 
    }, 
 
    yAxis: { 
 
    allowDecimals: false, 
 
    title: { 
 
     text: 'Test cases' 
 
    }, 
 
    labels: { 
 
     formatter: function() { 
 
     return this.value + "%"; 
 
     } 
 
    }, 
 
    min: 0, 
 
    max: 100 
 
    }, 
 
    series: [{ 
 
    name: 'IOS', 
 
    data: [{ 
 
     x: Date.UTC(2017, 09, 15), 
 
     y: 2, 
 
     expected: 6 
 
    }, { 
 
     x: Date.UTC(2017, 09, 16), 
 
     y: 3, 
 
     expected: 6 
 
    }, { 
 
     x: Date.UTC(2017, 09, 17), 
 
     y: 6, 
 
     expected: 6 
 
    }] 
 
    }, { 
 
    name: 'Android', 
 
    data: [{ 
 
     x: Date.UTC(2017, 09, 15), 
 
     y: 2, 
 
     expected: 12 
 
    }, { 
 
     x: Date.UTC(2017, 09, 16), 
 
     y: 3, 
 
     expected: 12 
 
    }, { 
 
     x: Date.UTC(2017, 09, 17), 
 
     y: 12, 
 
     expected: 12 
 
    }] 
 
    }, { 
 
    name: 'Windows', 
 
    data: [{ 
 
     x: Date.UTC(2017, 09, 15), 
 
     y: 6, 
 
     expected: 12 
 
    }, { 
 
     x: Date.UTC(2017, 09, 16), 
 
     y: 8, 
 
     expected: 12 
 
    }, { 
 
     x: Date.UTC(2017, 09, 17), 
 
     y: 14, 
 
     expected: 12 
 
    }] 
 
    }] 
 
});
<script src="https://code.highcharts.com/highcharts.js"></script> 
 
<div id="container" style="height: 400px"></div>

回答

0

这里是为了实现你所追求的一种方式。

http://jsfiddle.net/ewolden/dWDE6/1202/

我改变你的观点风格于以下内容:

actual: 2, 
expected: 6, 
y: 2/6*100 

而下面pointFormat:

pointFormat: '{series.name}: <b>{point.actual}/{point.expected}</b><br/>' 
相关问题