如何將光標樣式更改爲懸停在圖表上的指針？

我正在使用chart.js v.2。庫，我試圖在用戶懸停在圖表點上時將光標樣式更改爲「指針」。（我將使用這個吧，餅圖，折線圖）。在charts.js v.2中似乎應該支持這個選項。但我無法在任何地方找到示例。如何將光標樣式更改爲懸停在圖表上的指針？

編輯：我沒有提到，我正在使用圖表反應，更具體的我使用這個react wrapper。

我正在導入例如圖線import { Line } from 'react-chartjs-2';

class ChartTimelineChart extends Component { 



constructor(props){ 
    super(props); 

    this.options = { 
     responsive: true, 
     maintainAspectRatio: false, 
     animation: { 
      easing: 'easeOutCirc', 
      duration: 1000 
     }, 
     pointStyle : 'circle', 
      scales: { 
       xAxes: [{ 
        display: true, 
        gridLines: {display: false}, 
        scaleLabel: {display: true} 
       }], 
       yAxes: [{ 
        display: true, 
        gridLines: {display: false}, 
        ticks: {beginAtZero:true}, 
        scaleLabel: {display: true} 
       }] 
      }, 
     tooltips: { 
     displayColors: false 
     }, 
     legend: false 
    }; 


    searchChart(elem, props, data) { 
    //Something... 
    } 

    render(){ 

    return (
     (this.props.selectedYears.length) 
     ? ( <div> 
      <Line data={this.props.selectedYearsData} 
       redraw={true} 
       options={this.options} 
       getElementAtEvent={elem => this.searchChart(elem, this.props, this.props.selectedYearsData)} /> 
     </div>) 
     : <Line data={{datasets: [], labels: []}} 
       redraw={true} 
       options={this.options} /> 
    ) 
    } 
};

來源

2016-12-07 Merima Karić

我只是做了它的條形圖，但我相信，解決方案可能爲你工作了。有一個名爲「chart-hover」的屬性，您可以在其中設置回調。每次進入和離開圖表欄時都會觸發它。

這是我帆布的樣子：

<canvas id="bar-material" chart-hover="onHover" class="chart-horizontal-bar" chart-data="chartData" chart-labels="labels" chart-series="series" chart-colors="colors" chart-options="options" chart-click="onClick" height="160"> 
</canvas>

這是怎麼onHover選項看起來我控制器上：

$scope.onHover = function (points, evt) { 
    if (points.length === 0) { 
     evt.toElement.attributes.style.nodeValue = evt.toElement.attributes.style.nodeValue.replace("cursor: pointer;", "") 
     return; 
    } 
    var res = evt.toElement.attributes.style.nodeValue.match(/cursor: pointer;/); 
    if (res == null) { 
     evt.toElement.attributes.style.nodeValue += "cursor: pointer;" 
    } 
};

來源

2017-01-27 22:55:40

我已經改變了光標的風格在畫布上懸停的CSS ，但這不是我想要的。我希望光標在POINTS上更改樣式（例如，使用折線圖顯示工具提示的位置）...無論如何......感謝 –

這正是上述代碼所發生的情況。我剛剛在一個折線圖中進行了測試，光標轉向指向點並返回箭頭。你試過這個嗎？ –

請檢查更新的問題，並讓我知道我的情況是否以及如何使用您的解決方案。謝謝！ –

如何將光標樣式更改爲懸停在圖表上的指針？

回答

相關問題