Highcharts叠加百分比区域

我有不同系列的数据与实际值和期望值。对于每个国家而言，根据团队规模，预计至少要完成xx个任务。预期值可以增加或减少。每天都会检索新数据并保存在sqlite数据库中。这个想法是使用Python中的FLASK呈现数据。
Highcharts叠加百分比区域

SQLite数据库具有以下布局：Data layout

我在做梦，它以百分比怀斯的出这样的方式绘制这些数据。假设我只看到希腊的情节，那么它会查看最大期望值，在这种情况下为12，并且由于最大覆盖值为7，所以只会绘制面积的58％。如果我也是看波兰的情节，那么期望值就是22，这意味着为了达到100％，两国都必须完成他们的任务。

我已经尝试过了，但我有点失落。这里是我的代码：

Highcharts.chart('container', { 
chart: { 
    type: 'area' 
}, 
title: { 
    text: 'Covered assignents by country' 
}, 
xAxis: { 
    type: 'datetime', 
    tickmarkPlacement: 'on', 
    title: { 
     enabled: false 
    } 
}, 
yAxis: { 
    title: { 
     text: 'Percent' 
    } 
}, 
tooltip: { 
    pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.percentage:.1f}%</b> ({point.y:,.0f} assignments)<br/>', 
    split: true 
}, 
plotOptions: { 
    area: { 
     stacking: 'percent', 
     lineColor: '#ffffff', 
     lineWidth: 1, 
     marker: { 
      lineWidth: 1, 
      lineColor: '#ffffff' 
     } 
    } 
}, 
series: [{ 
    name: 'Greece', 
    data: [{x: Date.UTC(2017,09,08), y:4}, {x: Date.UTC(2017,09,09), y:6}, {x: Date.UTC(2017,09,10), y:7}] 
}, { 
    name: 'Poland', 
    data: [{x: Date.UTC(2017,09,08), y:1}, {x: Date.UTC(2017,09,09), y:3}, {x: Date.UTC(2017,09,10), y:5}] 
}, { 
    name: 'Italy', 
    data: [{x: Date.UTC(2017,09,08), y:1}, {x: Date.UTC(2017,09,09), y:2}, {x: Date.UTC(2017,09,10), y:7}] 
}] 
});

的jsfiddle：http://jsfiddle.net/ehnhq0pz/3/

我希望这是有道理的:)

来源

2017-09-12 Uthman

如何增加额外的系列，缺少赋值的值？这个额外的系列可能会被禁用（隐藏在图例中，透明的颜色，禁用的工具提示等），如下所示：http://jsfiddle.net/BlackLabel/ehnhq0pz/6/注意：这不是所有的“预期“值，但是”all_expected_values - all_covered_values“。 –

变化stacking从“百分比”到“正常”（ “百分比”总是将图表填充到顶部）。然后，你需要先进行数据系列之前计算y值百分比：

data: [{x: Date.UTC(2017,09,08), origTasks:4, y:14}, ...

以上，是你有点自己计算的百分比。请注意，您也可以在系列中包含其他数据，并稍后在工具提示中访问它（例如：origTasks）。

http://jsfiddle.net/ehnhq0pz/5/

来源

2017-09-12 15:26:08 Sphinxxx

我注意到，过滤系列时，百分比保持不变。似乎它没有更新整体分配？ – Uthman

Highcharts叠加百分比区域

回答

相关问题