Question

我想用图表线条样式更新图表的图例框。

实际消费平均使用

以下是我的代码，但图例标签图片未更新。任何人都可以帮助我吗？

var ctx = document.getElementById("myChart");
this.myChart = new Chart(ctx,  {
    type: 'line',
    data: {
        labels: ["Jan", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: 'Actual Consumption',
            data:[24, 49, 6, 7, 21, 6],
            backgroundColor: [
                'rgba(225,225,225,0)'  
            ],
            borderColor: [
                'rgba(53,91,183,1)'
            ],
            borderWidth: 2.2,
            pointStyle: 'circle', 
        },{
            label: 'Average Use ',
            data:[4, 12, 2, 17, 22, 2],
            backgroundColor: [
                'rgba(225,225,225,0)'  
            ],
            borderColor: [
                'rgba(230,104,38,1)'

            ],
            borderWidth: 2.2,
            pointStyle: 'rect',

        },{
            label: 'Total Use',
            data:this.data,
            backgroundColor: [
                'rgba(225,225,225,0)'  
            ],
            borderColor: [
                'rgba(148,148,148,1)'
            ] ,
            borderWidth: 2.2,
            pointStyle: 'triangle',

        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        },
        **legend: {
            cursor : "pointer",
            useLineStyle: true,
            labels: {
                fontColor: '#000000'
             }
        }**
    }
});

Answer 1

有一个名为“usePointStyle”的图例选项，它应该将图例样式与图形点的样式相匹配。

try {
        OkHttpClient client = new OkHttpClient();
        FormBody.Builder formBuilder = new FormBody.Builder().add("key", "2285");
        //formBuilder.add("phone", "000000");

        RequestBody formBody = formBuilder.build();
        Log.v("JsonRespons", reqUrl);
        Request request = new Request.Builder()
                .url(reqUrl)
                .post(formBody)
                .build();

        okhttp3.Response response = null;

        response = client.newCall(request).execute();

        if (!response.isSuccessful()) {
            throw new IOException(response.message() + " " + response.toString());
        } else {
            output = response.body().string();
        }

        if(output != null) {
            Log.v("JsonRespons", output.toString());
        }
    } catch (IOException e) {
         e.printStackTrace();
    }

如果这不能解决您的问题，您可能必须使用“legendCallback”来创建自定义HTML图例。

图表Js用图形线条样式

1 个答案: