Question

我正在尝试为我的chartjs实现这种外观：

这是我的chartjs：

这是我的script tag for chartjs：

    var ctx = document.getElementById("myChart");
    var myChart = new Chart(ctx, {
        type: 'pie',
        data: {
            labels: labels_most_forked,
            datasets: [{
                label: '# of Votes',
                data: values_most_forked,
                backgroundColor: [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderColor: [
                    'rgba(255,99,132,1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            legend: {
                position: 'right',
               verticalAlign: 'top',
            }
        },
        tooltips: {
            mode: 'label'
        },
      });

<canvas id="myChart" width="180" height="180"></canvas>

我尝试verticalAlign: 'top'来设置标签，但是它不起作用，如何使图表看起来更大？

添加后

responsive: true,
maintainAspectRatio: false,

Answer 1

您的图表很可能会丢失画布中的from pyspark.ml.clustering import KMeans from pyspark.ml.evaluation import ClusteringEvaluator def optimal_k(df_in,index_col,k_min, k_max,num_runs): ''' Determine optimal number of clusters by using Silhoutte Score Analysis. :param df_in: the input dataframe :param index_col: the name of the index column :param k_min: the train dataset :param k_min: the minmum number of the clusters :param k_max: the maxmum number of the clusters :param num_runs: the number of runs for each fixed clusters :return k: optimal number of the clusters :return silh_lst: Silhouette score :return r_table: the running results table :author: Wenqiang Feng :email: von198@gmail.com.com ''' start = time.time() silh_lst = [] k_lst = np.arange(k_min, k_max+1) r_table = df_in.select(index_col).toPandas() r_table = r_table.set_index(index_col) centers = pd.DataFrame() for k in k_lst: silh_val = [] for run in np.arange(1, num_runs+1): # Trains a k-means model. kmeans = KMeans()\ .setK(k)\ .setSeed(int(np.random.randint(100, size=1))) model = kmeans.fit(df_in) # Make predictions predictions = model.transform(df_in) r_table['cluster_{k}_{run}'.format(k=k, run=run)]= predictions.select('prediction').toPandas() # Evaluate clustering by computing Silhouette score evaluator = ClusteringEvaluator() silhouette = evaluator.evaluate(predictions) silh_val.append(silhouette) silh_array=np.asanyarray(silh_val) silh_lst.append(silh_array.mean()) elapsed = time.time() - start silhouette = pd.DataFrame(list(zip(k_lst,silh_lst)),columns = ['k', 'silhouette']) print('+------------------------------------------------------------+') print("| The finding optimal k phase took %8.0f s. |" %(elapsed)) print('+------------------------------------------------------------+') return k_lst[np.argmax(silh_lst, axis=0)], silhouette , r_table和maintainAspectRatio选项以及responsive和width设置。

这两个设置默认都设置为height，这使其在移动设备上看起来不错，但会导致馅饼看起来非常小。例如，请参见：https://jsfiddle.net/adelriosantiago/bzm38s7u/6/

添加设置

true

（可选）在画布中定义宽度和高度，例如options: { responsive: true, maintainAspectRatio: false, }。

无论容器的大小如何，您都应该获得一个使用大部分空间的馅饼。像这样：https://jsfiddle.net/adelriosantiago/r2h79vto/2/

此处有关这些设置的更多信息：https://www.chartjs.org/docs/latest/general/responsive.html

如何自定义chartjs

1 个答案: