chart.js - 图表 js 中的borderdash 选项改变了我的图例

Question

我在图表中添加了borderdash以使线条更加清晰，但它改变了我的图例的形状。我希望它是一个正方形，而不是传说中的那种奇怪的矩形。我不知道如何解决这个问题。有谁知道这个问题的解决方案？

这是我的图表 js 选项：

    var options = {
    responsive: true,
    maintainAspectRatio: false,
    backgroundColor: "#fffffff",
    title: {
        display: true,
        text: title,
        fontSize: 24
    },
    legend: {
        display: true

    },
    tooltips: {
        callbacks: {
            label: function(tooltipItem, ctx) {
                var label;

                if(x_axis == "Temperature [K]")
                {
                    label = [["Pressure: " + tooltipItem.yLabel], ["Temperature: " + tooltipItem.xLabel]];
                }
                else
                {
                    label = [["Pressure: " + tooltipItem.yLabel], ["Abundance: " + tooltipItem.xLabel]];
                }

                return label;
            },

        }
    },

    animation: {
        duration: 1 // general animation time
    },
    scales: {
        xAxes: [{
            type: x_type,
            display: true,
            ticks: {
                beginAtZero: false,
                autoSkip: false,
                fontSize: 20,
                suggestedMin: x_min,
                suggestddMax: x_max,
                callback: function(value, index, values) {
                    if (x_axis == "Abundance"){

                        if (value == 1e-9)
                        {
                            return 1 + "n";
                        }
                        else if(value == 1e-8) 
                        {
                            return 10 + "n";
                        }
                        else if(value == 1e-7) 
                        {
                            return 100 + "n";
                        }
                        else if (value == 1e-6){
                            return 1 + "\u03BC";
                        }
                        else if (value == 1e-5)
                        {
                            return 10 + "\u03BC";
                        }
                        else if(value == 1e-4)
                        {
                            return 100 + "\u03BC";
                        }
                        else if (value == .001 || value == .01 || value == .1 || value == 1){
                            return value;
                        }
                    }
                    else if (x_axis == "Temperature [K]")           
                    {
                        return value;
                    }
                }
            },
            scaleLabel: {
                labelString: x_axis,
                display: true,
                fontSize: 20,
                fontColor: "Black",
                }

        }],
        yAxes: [{
            type: 'logarithmic',
            display: true,
            ticks: {
                reverse: true,
                beginAtZero: false,
                autoSkip: false, 
                min: 1e-6,
                max: 1,
                steps: 6,
                fontSize: 20,
                callback: function(value, index, values) {
                    // y_log_ticks = [1e-6, 1e-5, 1e-4, 1e-3, 1e-2, 1e-1, 1]
                    if (value == 1e-6){
                        return 1 + "\u03BC";
                    }
                    else if (value == 1e-5)
                    {
                        return 10 + "\u03BC";
                    }
                    else if(value == 1e-4)
                    {
                        return 100 + "\u03BC";
                    }
                    else if (value == .001 || value == .01 || value == .1 || value == 1){
                        return value;
                    }
                }
            },
            scaleLabel:{
                display: true,
                labelString: y_axis,
                diplay: true,
                fontSize: 20,
                fontColor: "Black"}
        }]
    }
}

以下是我如何使用borderdash添加数据：

function update_plot(json){


line_patter = [[1,1], [10, 10], [20, 5], [15, 3, 3, 3], [20, 3, 3, 3, 3, 3, 3, 3], [12, 3, 3]];
counter++;

chart1.data.datasets.unshift({
    data: json.temp_pressure,
    showLine: true,
    pointRadius: 5, 
    fill: false,
    label: "Plot " + counter,
    borderDash: line_patter[counter % 6],
    borderColor: getLineColor(chart1.data.datasets.length),
    backgroundColor: getLineColor(chart1.data.datasets.length),
});

chart2.data.datasets.unshift({
    data: json.fh2o,
    showLine: true,
    pointRadius: 5, 
    fill: false,
    label: "Plot " + counter + ": H2O",
    borderDash: line_patter[counter % 6],
    borderColor: getLineColor(chart2.data.datasets.length),
    backgroundColor: getLineColor(chart2.data.datasets.length),
});

chart2.data.datasets.unshift({
    data: json.fo3,
    showLine: true,
    pointRadius: 5, 
    fill: false,
    label: "Plot " + counter + ": O3",
    borderDash: line_patter[counter % 6],
    borderColor: getLineColor(chart2.data.datasets.length),
    backgroundColor: getLineColor(chart2.data.datasets.length),
});

chart1.update();
chart2.update();

}

标签： chart.jsborderlegend

Answer 1

您需要通过定义内部图表来提供自己的图例标签配置。legend.labels.generateLabelsoptions

在以下代码示例中，创建一个实现Legend Item InterfacegenerateLabels的对象数组。每个对象只是从对应的但离开的对象中获取其属性。datasetlineDash undefined

new Chart(document.getElementById('myChartAxis'), {
  type: 'line',
  data: {
    labels: ['A', 'B', 'C', 'D'],
    datasets: [
      {
        label: 'WARNINGS',
          data: [0, 2, 3, 2],
          borderDash: [5],
          borderColor: 'rgb(255, 159, 64)',
          backgroundColor: 'rgba(255, 159, 64, 0.2)',
          fill: false
      },
      {
        label: 'ERRORS',
          data: [1, 1, 4, 3],
          borderDash: [2],
          borderColor: 'rgb(255, 99, 132)',
          backgroundColor: 'rgba(255, 99, 132, 0.2)',
          fill: false
      }
    ]
  },
  options: {
    legend: {
      labels: {
        generateLabels: chart => chart.data.datasets.map((dataset, i) => ({
          datasetIndex: i,
          text: dataset.label,
          fillStyle: dataset.backgroundColor,
          strokeStyle: dataset.borderColor
        }))        
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js"></script>
<canvas id="myChartAxis" height="90"></canvas>