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的文档阅读了大量内容。最后，我认为考虑到我是初次使用javascript的chart.js和borderline illiterate，它的表现相当不错。

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

1 个答案: