如何将我的数据集值缩放为 chart.js 中索引的百分比？

Question

抱歉，如果问题措辞不当。Here is my chart

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

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

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

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

It should look like this。所有可见线条应堆叠到 100%。如果数据集被隐藏，我如何重新计算百分比并更新图表以使所有内容都保持 100% 的堆叠状态？

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

如有任何帮助，我们将不胜感激。

Answer 1

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

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 * 
 *  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();

        }
    }

最终结果

这就是我想要做的：highchart fiddle

这就是我最终得到的：fiddle

花了几天时间和大量阅读 chartjs.org 的文档才把它放在一起。考虑到我是 chart.js 的新手并且对 javascript.

几乎是文盲，最后我认为结果相当不错

如何将我的数据集值缩放为 chart.js 中索引的百分比？

How can I scale my dataset values as a percentage of the index in chart.js?

chart.js

chart.js2