如何在chart.js中按索引的百分比缩放数据集值？

对不起，如果这个问题措词不当

我正在研究以百分比形式缩放图表中数据集值的显示，例如：

//input
data:{
   datasets[{
      label: 'data1',
      data: [15, 22, 18, 35, 16, 29, 40]
   },
   {
      label: 'data2',
      data: [20, 21, 20, 19, 21, 22, 35]
   }]

数据1在图表上的点将显示为[42.9,51.2,47.4,64.8,43.2,56.9,57.1]

数据2在图表上的点将显示为[57.1,48.8,52.6,35.2,56.8,43.1,42.9]

。所有可见线应叠加到100%。如果数据集被隐藏，我如何重新计算百分比并更新图表，使所有数据都保持在100%的水平

我曾想过做一个插件，使用myLine.data.datasets进行计算，但我不知道如何从计算中删除隐藏数据集的值，除非覆盖原始数据集，否则我不确定如何显示它。我很确定这是错误的方法

---

任何帮助都将不胜感激。

所以，我找到了答案。我需要编写一个函数来计算索引中点的百分比面积，然后用计算出的百分比值更新数据集

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 * 
 *  DS_update calculates the percentage area of the input datasets 
 * 
 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
function DS_update(dataset_in, ds_vis){
    // make a deep copy (no references to the source)
    var temp = jQuery.extend(true, [], dataset_in);

    // gets the sum of all datasets at a given index
    function getTotal(index){
        total = 0;
        // step through the datasets
        dataset_in.forEach(function(e, i){
            // inc total if the dataset is visible
            if(ds_vis[i]){
                total += e[index];
            }
            // do nothing if the dataset is hidden

        });
        return total;
    }

    // update temp array with calculated percentage values
    temp.forEach(function(el, ind){                                 

        var j = ind;
        el.forEach(function(e, i){      
            // calculate percentage to the hundredths place
            temp[j][i] = Math.round((e / getTotal(i))*10000)/100;
        }); 
    });

    return temp;
}

一旦我测试了这些函数，我必须在图表的初始加载之前运行它们，否则用户会将数据集视为非面积百分比（原始数据）。看起来是这样的：

// Keep source array to use in the tool tips
var Src_ary = Input_data;    // multidimensional array of input data
// holds the percent-area calculations as datapoints
var Prod_ary = DS_update(Src_ary, Init_visible(Src_ary));

接下来是更新图例的onClick。每次切换项目的可见性时，我都需要此选项来更新计算：

legend: {
    position: 'bottom',
    usePointStyle: true,
    onClick: 

        function(e, legendItem){      
            var index = legendItem.datasetIndex;
            var ci    = this.chart;
            var meta  = ci.getDatasetMeta(index);
            var vis_ary = [];           
            var updatedSet = [];

            // See controller.isDatasetVisible comment
            meta.hidden = meta.hidden === null? !ci.data.datasets[index].hidden : null;

            // load the visible array
            for(var i = 0; i < (ci.data.datasets || []).length; i++){
                switch (ci.getDatasetMeta(i).hidden){
                    case null:
                        vis_ary.push(true);
                    break;     
                    default:
                        vis_ary.push(false);
                    break;
                }
            }  

            // update datasets using vis_ary to tell us which sets are visible
            updatedSet = DS_update(Prod_ary, vis_ary);
            myLine.data.datasets.forEach(function (e,i){
                e.data = updatedSet[i];
            });

            // We did stuff ... rerender the chart
            ci.update();

        }
    }

图例：{
位置：'底部'，
usePointStyle:true，
onClick：
函数（e，legendItem）{
var指数=legendItem.datasetIndex；
var ci=这张图表；
var meta=ci.getDatasetMeta（索引）；
var vis_ary=[]；
var updateset=[]；
//请参阅controller.isDatasetVisible注释
meta.hidden=meta.hidden==null？！ci.data.dataset[index]。hidden:null；
//加载可见数组
对于（var i=0；i<（ci.data.datasets | | |[]）。长度；i++）{
开关（ci.getDatasetMeta（i）.hidden）{
大小写为空：
可视推送（真）；
打破
违约：
可视推送（假）；
打破
}
}  
//使用vis__ary更新数据集，告诉我们哪些集合是可见的
updatedSet=DS_update（产品、视觉）；
myLine.data.dataset.forEach（函数（e，i）{
e、 数据=更新集[i]；
});
//我们做了一些事情…重新播放图表
ci.update（）；
}
}

最终结果

这就是我想做的：

这就是我的结局：

花了几天时间和大量阅读chartjs.org的文档，才将其整合在一起。最后，考虑到我还不熟悉chart.js，而且对javascript一无所知，我觉得效果相当不错。

首先：将

[15,22,18,35,16,29,40]

转换为

[42.9,51.2,47.4,64.8,43.2,56.9,57.1]

的逻辑是什么。第二：这不是chartjs的工作方式。第三：虽然有可能实现，但会非常复杂（：