Question

https://jsfiddle.net/43Tesseracts/qmhhc089/

对于此图表的第一个数据集XPData，如何设置图例样式以使用点而不是线？

我希望我需要做的就是根据Scatter Line Chart docs添加showLines: false，但我无法弄清楚这个设置的位置。

这是数据集（见小提琴）：

var XPData = {
  label: 'XP Earned',
  //fill: false,
  //backgroundColor: "rgba(0,0,0,0)",
  //borderColor: "rgba(0,0,0,0)",
  pointBorderColor: "#444",
  pointBackgroundColor: "#444",
  data: [],
  showLines: false,
};

/*jshint esversion: 6 */

var ctx = document.getElementById("myChart");

class DataPoint {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
}

var days = 85;
var chillax = 72.5;

// XP DATA SET 
var XPData = {
  label: 'XP Earned',
  //fill: false,
  //backgroundColor: "rgba(0,0,0,0)",
  //borderColor: "rgba(0,0,0,0)",
  pointBorderColor: "#444",
  pointBackgroundColor: "#444",
  data: [],
  showLines: false,

  options: {
    legend: {
      labels: {
        usePointStyle: true
      }
    }
  },
};

// XP Data generation
var total = 0;
for (var i = 0; i < 35; i++) {
  total += 10 * Math.floor(Math.random() + 0.5);
  total += 5 * Math.floor(Math.random() + 0.5);
  total += 5 * Math.floor(Math.random() + 0.5);

  var p = new DataPoint(i + 1, total);
  XPData.data.push(p);
}


// XP Trend Data     
var XPTrendData = {
  label: 'XP Trend',
  fill: false,
  pointRadius: 0,
  lineTension: 0,
  borderDash: [5, 5],
  borderColor: "#ccc",
  backgroundColor: "rgba(0,0,0,0)",
  data: [],
};

// XP Trend calculaion
var total = 0;
var days_so_far = XPData.data.length;
total = XPData.data[days_so_far - 1].y;
var average_per_day = total / days_so_far;

var trend_total = total;
for (i = days_so_far; i < days; i++) {

  p = new DataPoint(i, trend_total);
  XPTrendData.data.push(p);
  trend_total += average_per_day;

}

// Chillax Line Data Set
var ChillaxLineData = {
  label: 'Chillax Line',
  pointRadius: 0,
  backgroundColor: "rgba(0,0,0,0)",
  borderColor: "#337AB7",
  data: [],
};

// Chill Line Generation
for (i = 1; i < days; i++) {
  p = new DataPoint(i, Math.floor(i * chillax * 10 / days));
  ChillaxLineData.data.push(p);

}

var options = {
  scaleUse2Y: true,

  scales: {

    xAxes: [{
      type: 'linear',
      position: 'bottom',
      ticks: {
        max: days,
        min: 0,
        stepSize: 5,
      },
      scaleLabel: {
        display: true,
        labelString: 'Days of Class'
      },
    }],

    yAxes: [{
        id: "y-axis-XP",
        position: 'right',
        ticks: {
          max: 1000,
          min: 0,
          stepSize: 50,
        },

        scaleLabel: {
          display: true,
          labelString: 'XP'
        },

        gridLines: {},
      },
      {
        id: "y-axis-percent",
        position: 'left',

        ticks: {
          max: 100,
          min: 0,
          stepSize: 5,
        },

        scaleLabel: {
          display: true,
          labelString: 'Percent'
        },

        gridLines: {
          /*show: true,
          color: "rgba(255, 255, 255, 1)",
          lineWidth: 1,
          drawOnChartArea: true,
          drawTicks: true,
          zeroLineWidth: 1,
          zeroLineColor: "rgba(255,255,255,1)", */
        },
      }


    ],
  },

  title: {
    text: 'A Map of Your Progress',
    display: true,
  },

  legend: {
    position: 'top',
  },

};

var data = {
  datasets: [XPData,
    XPTrendData,
    ChillaxLineData,
  ]
};

var myChart = new Chart(ctx, {
  type: 'line',
  data: data,
  options: options,
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.bundle.min.js"></script>
<canvas id="myChart" width="400" height="250"></canvas>

Answer 1

你应该在你的选项中使用这样的代码：

options: {
    legend: {
       labels: {
           usePointStyle: true
       }
     }
},

Answer 2

使用当前库

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js"></script>

添加

legend: {
    labels: {
      usePointStyle: true,
    },
  }

内部选项，而非var XPData = {...}

fiddle

var ctx = document.getElementById("myChart");

class DataPoint {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
}

var days = 85;
var chillax = 72.5;

// XP DATA SET 
var XPData = {
  label: 'XP Earned',
  fill: false,
  backgroundColor: "#444",
  borderColor: "#444",
  pointBorderColor: "#444",
  pointBackgroundColor: "#444",
  data: [],
  showLine: false,
};

// XP Data generation
var total = 0;
for (var i = 0; i < 35; i++) {
  total += 10 * Math.floor(Math.random() + 0.5);
  total += 5 * Math.floor(Math.random() + 0.5);
  total += 5 * Math.floor(Math.random() + 0.5);

  var p = new DataPoint(i + 1, total);
  XPData.data.push(p);
}


// XP Trend Data     
var XPTrendData = {
  label: 'XP Trend',
  fill: false,
  pointRadius: 0,
  lineTension: 0,
  borderDash: [5, 5],
  borderColor: "#ccc",
  backgroundColor: "rgba(0,0,0,0)",
  data: [],
};

// XP Trend calculaion
var total = 0;
var days_so_far = XPData.data.length;
total = XPData.data[days_so_far - 1].y;
var average_per_day = total / days_so_far;

var trend_total = total;
for (i = days_so_far; i < days; i++) {

  p = new DataPoint(i, trend_total);
  XPTrendData.data.push(p);
  trend_total += average_per_day;

}

// Chillax Line Data Set
var ChillaxLineData = {
  label: 'Chillax Line',
  pointRadius: 0,
  backgroundColor: "rgba(0,0,0,0)",
  borderColor: "#337AB7",
  data: [],
};

// Chill Line Generation
for (i = 1; i < days; i++) {
  p = new DataPoint(i, Math.floor(i * chillax * 10 / days));
  ChillaxLineData.data.push(p);

}



var options = {
  scaleUse2Y: true,

  scales: {

    xAxes: [{
      type: 'linear',
      position: 'bottom',
      ticks: {
        max: days,
        min: 0,
        stepSize: 5,
      },
      scaleLabel: {
        display: true,
        labelString: 'Days of Class'
      },
    }],

    yAxes: [{
        id: "y-axis-XP",
        position: 'right',
        ticks: {
          max: 1000,
          min: 0,
          stepSize: 50,
        },

        scaleLabel: {
          display: true,
          labelString: 'XP'
        },

        gridLines: {},
      }, {
        id: "y-axis-percent",
        position: 'left',

        ticks: {
          max: 100,
          min: 0,
          stepSize: 5,
        },

        scaleLabel: {
          display: true,
          labelString: 'Percent'
        },

        gridLines: {
          /*show: true,
          color: "rgba(255, 255, 255, 1)",
          lineWidth: 1,
          drawOnChartArea: true,
          drawTicks: true,
          zeroLineWidth: 1,
          zeroLineColor: "rgba(255,255,255,1)", */
        },
      }


    ],
  },

  title: {
    text: 'A Map of Your Progress',
    display: true,
  },
  legend: {
    labels: {
      usePointStyle: true,
    },
  }

};

var data = {
  datasets: [XPData,
    XPTrendData,
    ChillaxLineData,
  ]
};

var myChart = new Chart(ctx, {
  type: 'line',
  data: data,
  options: options,
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js"></script>

<canvas id="myChart" width="400" height="250"></canvas>

Answer 3

showLine = false，而不是showLine s 。然后像往常一样设置边框/背景颜色，并显示图例。

选项中的setPointStyle会将图例更改为点。

在chart.js中显示图例上的点样式

3 个答案: