麻烦获取CanvasJS仅对工具提示中的坐标进行着色

Question

工具提示文字：10Dataseries 1: 71Dataseries 2: 77我试图让工具提示，因此Dataseries 1:并Dataseries 2:保持其当前的颜色，和10，71和77为红色。我已经尝试过了，toolTipContent: " x: <span style='\"'color: red;'\"'>{x}</span> y: {y} <br/> name: {name}, label:{label} ",但是没有任何改变。我确定这是一个愚蠢的错误，但是我是使用CanvasJS的新手，还无法正常工作。（https://jsfiddle.net/lightmaster/8p3ygwf1/）var chart = new CanvasJS.Chart("chartContainer", {  backgroundColor: "RGBA(37, 41, 45, 0.9)",  animationEnabled: true,  title: {    text: " ",    fontSize: 11,    fontColor: ' #ccc',    fontFamily: "arial",  },  toolTip: {    fontStyle: "normal",    cornerRadius: 4,    backgroundColor: "RGBA(37, 41, 45, 0.9)",    toolTipContent: " x: {x} y: {y} <br/> name: {name}, label:{label} ",    shared: true,  },  axisX: {    gridColor: "RGBA(64, 65, 66, 0.8)",    labelFontSize: 10,    labelFontColor: ' #ccc',    lineThickness: 1,    gridThickness: 1,    gridDashType: "dot",    titleFontFamily: "arial",    labelFontFamily: "arial",    interval: "auto",    intervalType: "hour",    minimum: 0,    crosshair: {      enabled: true,      snapToDataPoint: true,      color: "#9aba2f",      labelFontColor: "#ccc",      labelFontSize: 14,      labelBackgroundColor: "#FF8841",    }  },  axisY: {    title: "Temperature (°F) Recorded",    titleFontColor: "#ccc",    titleFontSize: 10,    titleWrap: false,    margin: 10,    lineThickness: 1,    gridThickness: 1,    gridDashType: "dot",    includeZero: false,    gridColor: "RGBA(64, 65, 66, 0.8)",    labelFontSize: 11,    labelFontColor: ' #ccc',    titleFontFamily: "arial",    labelFontFamily: "arial",    labelFormatter: function(e) {      return e.value.toFixed(0) + " °F ";    },    crosshair: {      enabled: true,      snapToDataPoint: true,      color: "#9aba2f",      labelFontColor: "#fff",      labelFontSize: 12,      labelBackgroundColor: "#FF8841",      valueFormatString: "#0.# °F",    }  },

Answer 1

在图表级别，toolTipContent您不需要content。您的toolTipContent代码当前正在被忽略，因为这是仅在数据级别使用的属性。您可以按照以下基本要求直接设置样式：

toolTip: {

  fontStyle: "normal",

  cornerRadius: 14,

  backgroundColor: "RGBA(37, 41, 45, 0.9)",

  content: "<span style='\"'color: red;'\"'>{x}</span><br/> <span style='\"'color: {color};'\"'>{name}</span> <span style='\"'color: red;'\"'>{y}</span>",

  shared: true,

}

由于您正在使用shared: true，因此您的x值将显示两次。如果您不想这样做，请查看文档中“共享的工具提示”部分的contentFormatter函数。