Question

我有不同系列的数据，包含实际值和期望值。对于每个国家/地区，根据团队规模，预计至少要完成xx分配。预期值可以增加或减少。每天检索新数据并保存在sqlite数据库中。我们的想法是使用Python中的FLASK来呈现数据。

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

我梦想以这样的方式绘制这些数据，以百分比的方式显示。让我们说如果我只看到希腊的情节，它会看到最大预期值，在这种情况下为12，并且只会绘制58％的面积，因为最大覆盖值是7。我还看到了波兰的情节，预期值将是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/

我希望这是有道理的：）

Answer 1

将stacking从＆＃34;百分比＆＃34; 更改为＆＃34;正常＆＃34; （＆＃34;百分比＆＃34;总是将图表填入顶部）。然后，您需要在创建数据系列之前将y值计算为百分比：

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

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

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

Highcharts堆积百分比面积

1 个答案: